Want to add dropdownlist in my grid

5 posts, 0 answers
  1. Parvez
    Parvez avatar
    2 posts
    Member since:
    Dec 2012

    Posted 05 Jan 2013 Link to this post

    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

  2. Parvez
    Parvez avatar
    2 posts
    Member since:
    Dec 2012

    Posted 06 Jan 2013 Link to this post

    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();

            }
        }
    }


  3. Marcel Härry
    Marcel Härry avatar
    33 posts
    Member since:
    Jul 2009

    Posted 07 Feb 2014 in reply to Parvez Link to this post

    doesnt seem to work for me, no idea what this line is good for...
    function onGridDataBound(e) { $('#RoleName script').appendTo(document.body); });
  4. Sam
    Sam avatar
    6 posts
    Member since:
    Oct 2013

    Posted 02 Oct 2017 Link to this post

    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!

  5. Stefan
    Admin
    Stefan avatar
    2479 posts

    Posted 04 Oct 2017 Link to this post

    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.
Back to Top