Telerik MVC Grid with multiple checkboxes in a single row, single column - asp.net-mvc-3

Question

I am trying to construct a Telerik MVC grid and am having great difficulty constructing a row which contains more than one checkbox in a grid cell.
So far my attempt has gotten me only half way there. It displays a single row with a whole bunch of check boxes in the first cell, but when I want to add a record via the "Insert" toolbar button, I get a blank line.
Here is my model and view. Any help would be appreciated.
public class MyModel {
public MappingsModel[] Mappings { get; set; }
public class MappingsModel {
public CustomerRoleModel[] CustomerRoles { get; set; }
public int[] SelectedCustomerRoleIds { get; set; }
}
public class CustomerRoleModel {
public int Id { get; set; }
public string Name { get; set; }
public bool Selected { get; set; }
}
}
#(Html.Telerik().Grid(Model.Mappings)
.Name("rules-grid")
.DataKeys(keys =>
{
keys.Add(x => x.Id);
})
.DataBinding(dataBinding =>{
dataBinding.Ajax()
.Select("RuleList", "MyController")
.Insert("RuleInsert", "MyController")
.Update("RuleUpdate", "MyController")
.Delete("RuleDelete", "MyController");
})
.Columns(columns =>
{
columns.Bound(x => x.CustomerRoles)
.Template(#<text>
#foreach (var role in #item.CustomerRoles) {
<text><input type="checkbox" value="#(role.Id)" id="role_#(role.Id)" name="SelectedCustomerRoleIds" disabled="disabled" </text>
if(role.Selected) {
<text>checked="checked"</text>
}
<text>/><label for="role_(#role.Id)">#role.Name</label><br /></text>
}
</text>
)
.Width(500);
columns.Command(commands =>
{
commands.Edit();
commands.Delete();
})
.Width(180);
})
.ToolBar(commands => commands.Insert())
.EnableCustomBinding(true));
Update
I have tried the suggestion offered by #howcheng but this renders the checkboxes like so:
[object Object],[object Object],[object Object],[object Object]
The data I'm getting back via Ajax looks valid even though it doesn't looked correct below. Any ideas?
data: [{Name:null, Age:0,…}]
0: {Name:null, Age:0,…}
Age: 0
CustomerRoles: [{Name:Administrators, Selected:false, Id:1}, {Name:Forum Moderators, Selected:false, Id:2},…]
0: {Name:Administrators, Selected:false, Id:1}
1: {Name:Forum Moderators, Selected:false, Id:2}
2: {Name:Guests, Selected:false, Id:4}
3: {Name:Registered, Selected:false, Id:3}
Id: 1
Name: null
total: 1

Answer 1

What you've done is define a display template. In order to edit, you need a custom editor template. Create a partial view in your /Views/Shared/EditorTemplates directory and call it something like "CustomerRoles.cshtml".
Editor template:
#model CustomerRoleModel[]
#foreach (CustomerRoleModel crm in Model)
{
// checkbox code goes here
}
Grid code:
#(Html.Telerik().Grid(Model.Mappings)
.Columns(columns =>
{
columns.Bound(x => x.CustomerRoles)
.Template(#<text>
#item.Select(r => r.Name).Aggregate((s1, s2) => string.Format("{0}, {1}", s1, s2))); // this is for display only
</text>)
.ClientTemplate("<#= CustomerRolesClientTemplate(data) #>")
.EditorTemplateName("CustomerRoles"); // this loads the editor template
// additional columns
})
// additional grid code
)
Javascript function for client template:
function CustomerRolesClientTemplate(data) {
var value = '';
var first = true;
for (var i = 0; i < data.length; i++) {
if (!first) value += ', ';
value += data.Name;
first = false;
}
return value;
}
In your Google searching, you might come across the Telerik documentation -- DON'T RELY ON THIS because it's a little out of date (it's not written for Razor and you don't need to use the [UIHint] attribute, for example).