This is a migrated thread and some comments may be shown as answers.

Want to add dropdownlist in my grid

4 Answers 1797 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Parvez
Top achievements
Rank 1
Parvez asked on 05 Jan 2013, 11:43 PM
Hi,
I want to add dropdownlist list of Role field to  my grid cell. 
Currently I am using ASP.NET MVC3 RAZOR engine.

I have a template. When it is executed, RoleName field is displayed as label in grid cell which should be displayed as drop down list.


_RoleDropDown.cshtml
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 @(Html.Kendo().DropDownList()
      .Name("RoleName")
           .DataTextField("Text")
                .DataValueField("Value")
      .BindTo(new List<SelectListItem>
                  {
                      new SelectListItem {Text = "Admin", Value = "Admin"},
                      new SelectListItem {Text = "User", Value = "User"}
                  }))
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------


 

My current view is as follows.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

@model List<TssPlog.Models.User>
           
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/AdminLayout.cshtml";
}

<div>
        <fieldset>
            <legend>Logs</legend>
            <p></p>
            @{
            
            Html.Kendo().Grid(Model)
            .Name("UserGrid")
            .Columns(
            columns =>
            {
                columns.Bound(p => p.FirstName);
                columns.Bound(p => p.LastName);
                columns.Bound(p => p.Ntid);
                columns.Bound(p => p.RoleName).EditorTemplateName("_RoleDropDown");                  
                columns.Bound(p => p.Phone);
                columns.Bound(p => p.EmailAddress);                                            
                
            }
            )
            
            .Pageable(ps => ps.Refresh(true)
                            .PreviousNext(true).PageSizes(true))
            .Sortable()            
            .Editable(m=>m.Mode(GridEditMode.InCell))
            .ToolBar(toolbar=>toolbar.Save().SaveText("Save").CancelText("Cancel"))
            .Selectable(s => s.Enabled(true)
                            .Type(GridSelectionType.Row)
                            .Mode(GridSelectionMode.Single))
            .Filterable()
                  
            .DataSource
            (dataSource => dataSource
            .Ajax()
            .Batch(true)
            .Read(read => read.Action("UsersRead", "AdminUserAdministration"))
            .Update(update => update.Action("UsersUpdate", "AdminUserAdministration"))
            .PageSize(5)
            .ServerOperation(false)
            .Model(model => { model.Id(p => p.UserId); model.Field(p => p.UserId).Editable(false); }
                    )
            ).Render();
        
            
            }
      
        </fieldset>
 </div>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

and my controller is as follows.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using TssPlog.Models;

namespace TssPlog.Controllers
{
    public class AdminUserAdministrationController : Controller
    {
        //
        // GET: /AdminUserAdministration/
        public ActionResult Index()
        {
            var userManager = new UserManager(Request.ServerVariables["LOGON_USER"]);
            PopulateRoleNames();
            return View(userManager.GetAllUser());
        }
        
        public ActionResult UsersRead([DataSourceRequest] DataSourceRequest request)
        {
            var userManager = new UserManager(Request.ServerVariables["LOGON_USER"]);
            return Json(userManager.GetAllUser().ToDataSourceResult(request));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult UsersUpdate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<User> users)
        {
            if (users != null && ModelState.IsValid)
            {
                foreach (var user in users)
                {
                    var userManager = new UserManager();
                    userManager.UpdateUser(user);
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }
        
    }
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Best regards
Parvez Nawaz

4 Answers, 1 is accepted

Sort by
0
Parvez
Top achievements
Rank 1
answered on 06 Jan 2013, 09:42 PM
Hi,
I resolved this.

partial view: Shared/EditorTemplates/_RoleDropDown.cshtml

 @(Html.Kendo().DropDownListFor(m => m)
            .Name("RoleName").HtmlAttributes(new { @style = "font-size:12px" })
            .DataTextField("RoleName")
            .DataValueField("RoleName")
            .BindTo((System.Collections.IEnumerable)ViewData["RoleNames"]))


view: Index.cshtml

@model List<TssPlog.Models.User>
     


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/AdminLayout.cshtml";
}

<div>
        <fieldset>
            <legend>Logs</legend>
       @*     @Html.Partial("_RoleDropDown")*@
            <p></p>
            @{
            
            Html.Kendo().Grid(Model)
            .Name("UserGrid")
            .Columns(
            columns =>
            {
                columns.Bound(p => p.FirstName);
                columns.Bound(p => p.LastName);
                columns.Bound(p => p.Ntid);
                //columns.Bound(p => p.RoleName).ClientTemplate("<select><option value='User'>User</option><option value='Admin'>Admin</option></select>");                

                columns.Bound(p => p.RoleName).EditorTemplateName("_RoleDropDown");
                
                columns.Bound(p => p.Phone);
                columns.Bound(p => p.EmailAddress);                                            
                
            }
            )
            
            .Pageable(ps => ps.Refresh(true)
                            .PreviousNext(true).PageSizes(true))
            .Sortable()            
            .Editable(m=>m.Mode(GridEditMode.InCell))
            
            .ToolBar(toolbar=>toolbar.Save().SaveText("Save").CancelText("Cancel"))
            .Selectable(s => s.Enabled(true)
                            .Type(GridSelectionType.Row)
                            .Mode(GridSelectionMode.Single))
            .Filterable()
                  
            .DataSource
            (dataSource => dataSource
            .Ajax()
            .Batch(true)
            .Read(read => read.Action("UsersRead", "AdminUserAdministration"))
            .Update(update => update.Action("UsersUpdate", "AdminUserAdministration"))
            .PageSize(5)
            .ServerOperation(false)
            .Model(model => { model.Id(p => p.UserId); model.Field(p => p.UserId).Editable(false); }
                    )
            ).Render();
        
            
            }
      
        </fieldset>
 </div>
 <script type="text/javascript">
      $(document).ready(
     function onGridDataBound(e) { $('#RoleName script').appendTo(document.body); });
 </script>


Controller.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using TssPlog.Models;

namespace TssPlog.Controllers
{
    public class AdminUserAdministrationController : Controller
    {
        //
        // GET: /AdminUserAdministration/
        public ActionResult Index()
        {
            var userManager = new UserManager(Request.ServerVariables["LOGON_USER"]);
            PopulateRoleNames();
            return View(userManager.GetAllUser());
        }
        
        public ActionResult UsersRead([DataSourceRequest] DataSourceRequest request)
        {
            var userManager = new UserManager(Request.ServerVariables["LOGON_USER"]);
            return Json(userManager.GetAllUser().ToDataSourceResult(request));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult UsersUpdate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<User> users)
        {
            if (users != null && ModelState.IsValid)
            {
                foreach (var user in users)
                {
                    var userManager = new UserManager();
                    userManager.UpdateUser(user);
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }
        private void PopulateRoleNames()
        {
            ViewData["RoleNames"] = new RoleManager().GetAllRoles();

        }
    }
}


0
Marcel Härry
Top achievements
Rank 1
answered on 08 Feb 2014, 01:19 AM
doesnt seem to work for me, no idea what this line is good for...
function onGridDataBound(e) { $('#RoleName script').appendTo(document.body); });
0
Sam
Top achievements
Rank 1
answered on 03 Oct 2017, 01:46 AM

Does someone able to resole this with Telerik MVC razor code?  I cannot get it to map the grid column's value with the dropdown's value

Thanks!

0
Stefan
Telerik team
answered on 04 Oct 2017, 10:21 AM
Hello, Sam,

I can suggest checking the following article demonstrating the required steps when using a DropDownEditor in the MVC Grid:

http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates#editor-templates

The result can be observed in our demo: 

http://demos.telerik.com/aspnet-mvc/grid/editing-custom

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Parvez
Top achievements
Rank 1
Answers by
Parvez
Top achievements
Rank 1
Marcel Härry
Top achievements
Rank 1
Sam
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or