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

No values returned from MultiSelectFor in Popup on Grid

2 Answers 116 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 27 Jul 2013, 12:27 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 31 Jul 2013, 06:49 AM
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!
0
Tony
Top achievements
Rank 1
answered on 31 Jul 2013, 10:40 PM
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
Tags
MultiSelect
Asked by
Tony
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Tony
Top achievements
Rank 1
Share this question
or