KendoUI Grid. Multiple values in a column

Question

I'm working on a ASP.NET MVC 4.5 project with Razor and KendoUI. I have the following two classes:

public class Rol
    {
        [Key]
        [ScaffoldColumn(false)]
        public int RolId { get; set; }

        [Required]
        [MaxLength(50)]
        public string Name{ get; set; }

        [MaxLength(255)]
        public string Desciption { get; set; }

        public bool Active{ get; set; }

        [DisplayName("Permissions")]
        public virtual ICollection<Permission> Permissions { get; set; }
    }

public class Permission
    {
        [Key]
        [ScaffoldColumn(false)]
        public int PermisoId { get; set; }

        [Required]
        [MaxLength(50)]
        public string Name { get; set; }

        [MaxLength(255)]
        public string Description { get; set; }

        public bool Active { get; set; }

        public ICollection<Rol> Rols { get; set; }
    }

But I do not know how to make a grid that has columns:

column with Rol.Name | column with Rol.Description | column with Rol.Active | column with all Rol.Permissions.Name(list)

And spport the CRUD operations of KendoUI

In the view I have:

@model IEnumerable<ItemsMVC.Models.Rol>    
    @(
        Html.Kendo().Grid(Model)
            .Name("Grid")
            .Columns(c =>
                {
                    c.Bound(p => p.RolId).Visible(false);
                    c.Bound(p => p.Name);
                    c.Bound(p => p.Description);
                    c.Bound(p => p.Active)
                        .ClientTemplate("#= Active ? 'yes' : 'No' #")
                        .Width(100);
                    **HERE THE LIST OF PERMISSIONS**
                    c.Command(p => { 
                        p.Edit(); 
                        p.Destroy();
                    }).Width(200);
                }        
            )        
            .Pageable(p => p.Enabled(true))
            .Scrollable(s => s.Enabled(true))
            .Sortable(s => s.Enabled(true))
            .Filterable(f => f.Enabled(true))
            .ColumnMenu(c => c.Enabled(true))
            .ToolBar(t => t.Create())
            .Editable(e => e.Mode(GridEditMode.PopUp))
            .DataSource( ds => ds
                .Ajax()
                .Model(model =>model.Id(p => p.RolId))
                .Create(c => c.Action("EditingInline_Create", "Rol"))
                .Read(r => r.Action("Permisos_Read","Rol"))
                .Update(u => u.Action("EditingInline_Update", "Rol"))
                .Destroy(d => d.Action("EditingInline_Destroy", "Rol"))
            )
    )

Answer 1

You will need to create another property in Rol called something like

string PermissionList
{
    get ( return [Convert Permissions collection to string of values]; ) 
}

This property can then call Permissions and convert to a string listing Names, presumably. Do not try to do this in the Grid, do it in your Rol class. I would also suggest renameing Rol to RoleModel and Permission to PermissionModel, but obviously that is preference.