No values returned from MultiSelectFor in Popup on Grid

[Tony]

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

[Petur Subev]

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

[Tony]

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