No values returned from MultiSelectFor in Popup on Grid

3 posts, 1 answers
  1. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 27 Jul 2013 Link to this post

    Hi there,

    I have a problem with a multiselectfor in my test application.

    I am attempting to return a list of roles for a user into a multiselectfor in a template.

    In the template I have the following:
        @(Html.Kendo().MultiSelectFor(model=>model.RoleList)
        .Name("RoleList")
            .HtmlAttributes(new { style = "width: 310px;" })
            .Placeholder("Select roles...")
            .DataTextField("RoleName")
            .DataValueField("RoleId")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetClientRolesList", "Client", new { id = ViewContext.RouteData.Values["id"] });
                    read.Type(HttpVerbs.Post);
                })
                .ServerFiltering(false);
            })
    )
    This shows the list of Roles available in the multiselect, but it doesn't show any values in the box. I am able to click on the box and select some items from the list and they are then shown in the box. When I post back, those items do not arrive.

    @model is ClientUserViewModel

    So model.RoleList returns a List of RoleViewModels
    [DisplayName("Roles")]
    public List<RoleViewModel> RoleList
    {
        get;
        set;
    }
    RoleViewModel looks like this:
    namespace MyApp.Models
    {
        public class RoleViewModel
        {
            public int RoleId
            {
                get;
                set;
            }
             
            public string RoleName
            {
                get;
                set;
            }
     
        }
    }
    The Client Roles List in the Client Controller looks like this:
    public ActionResult GetClientRolesList(int id, [DataSourceRequest] DataSourceRequest request)
    {
        using (var db = new MyAppEntities())
        {
            var rolesList = (from role in db.webpages_Roles
                             select new RoleViewModel()
                             {
                                RoleId = role.RoleId,
                                RoleName = role.RoleName
                             });
     
            return Json(rolesList.ToList());
        }
    }
    And finally, the Update statement it calls is this:
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult ClientUser_Update(int id, [DataSourceRequest] DataSourceRequest request, ClientUserViewModel clientUser)
    {
        if (clientUser != null && ModelState.IsValid)
        {
            try
            {
                ClientUserRepository.Update(id,clientUser);
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("ClientName", ex.Message);
            }
        }
     
        return Json(new[] { clientUser }.ToDataSourceResult(request, ModelState));
    }
    When this method is called, the clientUser.RolesList has the correct number of items, but the items themselves are essentially empty. That means that the RoleId is 0 and the RoleName is null.

    The grid statement on the main page is here:
    @(Html.Kendo().Grid<MyApp.Models.ClientUserViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(u => u.UserId).Hidden();
            columns.Bound(u => u.FirstName).Width(100);
            columns.Bound(u => u.LastName).Width(100);
            columns.Bound(u => u.UserName).Width(100);
            columns.Bound(u => u.RoleList).Hidden();
            columns.Bound(u => u.zTimestamp).Hidden();
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientUser"))
        .Pageable()
        .Filterable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:580px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Batch(false)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(u => u.UserId))
            .Create(update => update.Action("ClientUser_Create", "Client", new { id = ViewContext.RouteData.Values["id"] }))
            .Read(read => read.Action("ClientUser_Read", "Client", new { id = ViewContext.RouteData.Values["id"] }))
            .Update(update => update.Action("ClientUser_Update", "Client", new { id = ViewContext.RouteData.Values["id"] }))
            .Destroy(update => update.Action("ClientUser_Destroy", "Client", new { id = ViewContext.RouteData.Values["id"] }))
        )
    )
    The "id" referred to here is the specific customer's id (real world client, not IT client.) and it's essentially supposed to show a list of users for that client and the roles that they are associated with. I am supposed to be able to add and remove roles for a user via the multiselect.

    Any ideas what I'm doing wrong?

    Regards,
    Tony
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 31 Jul 2013 Link to this post

    Hello Tony,

    ASP.NET MVC requires special format in which you need to send those nested array items. 

    To enable editing of a Nested array with MultiSelect you need to handle the serialization like shown in this code library:

    http://www.kendoui.com/code-library/mvc/grid/using-multiselect-in-grid.aspx

    Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 31 Jul 2013 Link to this post

    Hi Peter,

    Thanks for that. I started with that example and I was able to gradually change that example into one that worked for me.

    Regards,
    Tony
Back to Top