Need help adding a multiselect or dropdown in my grid

[Nicklas]

Hi,

I'm working on a user management system in asp.net mvc, where I display all my users in a grid using KendoUI. However, I have a string based list of user roles, which I need to display as a dropdown in my edit view. Since my view is generated based on my model, I'm not really sure how to accomplish this.

Here's how my model looks like:

public class UserModel
{
    #region Properties
    [Display(Name = @"Username")]
    [Required]
    public string UserName { get; set; }
    [Required]
    public string Name { get; set; }
    [Display(Name = @"E-mail")]
    [EmailAddress]
    public string Email { get; set; }
    public string Phone { get; set; }
    public string Company { get; set; }
    [DataType(DataType.Password)]
    [Display(Name = @"Password")]
    [Required]
    public string PasswordHash { get; set; }
    [Display(Name= @"Roles")]
    public List<string> UserRoles { get; set; }
    [ScaffoldColumn(false)]
    public string UserRoleIcon { get; set; }
    [ScaffoldColumn(false)]
    public string UserRoleIconInverted { get; set; }

    #endregion

    public UserModel()
    {

    }

    public UserModel(UserContract userContract)
    {
        SetupUserModel(userContract);
    }

    private void SetupUserModel(UserContract userContract)
    {
        UserName = userContract.UserName;
        Name = userContract.Name;
        Email = userContract.Email ?? "";
        Phone = userContract.Phone ?? "";
        Company = userContract.Company ?? "";
        PasswordHash = userContract.PasswordHash ?? "";
        UserRoles = new List<string>();

        if (userContract.UserRoles != null)
        {
            foreach (var userRole in userContract.UserRoles)
            {
                UserRoles.Add(userRole);
            }
        }

        SelectUserRoleIcon(UserRoles);
    }

    // TODO: Hierarchy on roles and selecting images?
    private void SelectUserRoleIcon(IEnumerable<string> userRoles)
    {
        foreach (var userRole in userRoles)
        {
            switch (userRole.ToLower())
            {
                case "administrator":
                    UserRoleIcon = "Administrator.png";
                    UserRoleIconInverted = "Administrator_Black.png";
                    break;
                case "operator":
                    UserRoleIcon = "Operator.png";
                    UserRoleIconInverted = "Operator_Black.png";
                    break;
                case "supervisor":
                    UserRoleIcon = "Supervisor.png";
                    UserRoleIconInverted = "Supervisor_Black.png";
                    break;
                default:
                    UserRoleIcon = "Guest.png";
                    UserRoleIconInverted = "Guest_Black.png";
                    break;
            }
        }
    }
}

Here's my grid:

@(Html.Kendo().Grid<Stimline.Xplorer.Services.Models.User.UserModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.UserName);
            columns.Bound(p => p.Name);
            columns.Bound(p => p.Email);
            columns.Bound(p => p.Phone);
            columns.Bound(p => p.UserRoles);
            columns.Command(command => { command.Edit(); }).Width(160);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Pageable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.UserName))
            .Create(update => update.Action("EditingPopup_Create", "UserManagement"))
            .Read(read => read.Action("EditingPopup_Read", "UserManagement"))
            .Update(update => update.Action("EditingPopup_Update", "UserManagement"))
            //.Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
        )
    )

I don't really need to display the column with selected roles in the grid, but what I do need is the possibility to add / edit them from the popup. Preferably as a multiselect list, as a user could have several roles. I've tried following this example, but can't seem to manage to get it right.
See the attached images for a description of how it looks now.

[Vladimir Iliev]

Hi Nicklas,

For your convenience I created small example (attached to the current thread) of using both MultiSelect and DropDownList widgets inside custom PopUp editor template which you can use as a baseline to achieve the desired behavior. The project is self explanatory.

Regards,
Vladimir Iliev
Telerik

 

 

[Nicklas]

Thanks! I've been able to get it working!  :) The only problem now is that I can't seem to populate the actual roles column in the grid with the selected values.

<script type="text/kendo" id="rolesTemplate">
    <ul>
        #for(var i = 0; i< data.length; i++){#
        <li>#:data[i].Name#</li>
        #}#
    </ul>
</script>
<script type="text/javascript">
    var rolesTemplate = kendo.template($("#rolesTemplate").html(), { useWithBlock: false });
</script>
<div class="container">
    <div class="row">
        <div class="col-md-12 sl-table">
            @(Html.Kendo().Grid<UserModel>()
                    .Name("grid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.UserName);
                        columns.Bound(p => p.Name);
                        columns.Bound(p => p.Email);
                        columns.Bound(p => p.Phone);
                        columns.Bound(p => p.UserRoles).ClientTemplate("#=rolesTemplate(UserRoles)#");
                        columns.Bound(p => p.Disabled).Width(150);
                        columns.Command(command => { command.Edit(); }).Width(100);
                    })
                    .ToolBar(toolbar => toolbar.Create())
                    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomPopUpTemplate"))
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .HtmlAttributes(new { style = "height:500px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .Events(events => events.Error("error_handler"))
                        .Model(model => model.Id(p => p.UserName))
                        .Create(update => update.Action("EditingPopup_Create", "UserManagement"))
                        .Read(read => read.Action("EditingPopup_Read", "UserManagement"))
                        .Update(update => update.Action("EditingPopup_Update", "UserManagement"))
                    )
                )
        </div>
    </div>

Where UserRoles is a List<Role> in my UserModel. 
Console windows says this:
Uncaught TypeError: Cannot read property 'length' of null.

Suggestions?

[Vladimir Iliev]

Hi Nickalas,

From the provided information it seems that the UserRoles are null in the column template. In current case I would suggest to first check if the "data" parameter is not null before executing the loop:

<script type="text/kendo" id="rolesTemplate">
    <ul>
        #if(data){#
            #for(var i = 0; i< data.length; i++){#
                <li>#:data[i].Name#</li>
            #}#
        #}#
    </ul>
</script>

Also you should define default value for the "UserRoles" in the DataSource Model definition. Please check the suggested change below:

.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Field(p => p.UserRoles).DefaultValue(new List<string>());

If the above changes doesn't help, please provide runable example where the issue is reproduced in order to investigate further current behavior. 

Kind Regards,
Vladimir Iliev
Telerik