Telerik MVC Grid 在单行单列中具有多个复选框

Question

我正在尝试构建 Telerik MVC 网格，但在构建网格单元格中包含多个复选框的行时遇到了很大困难。

到目前为止，我的尝试只完成了一半。它在第一个单元格中显示一行带有一大堆复选框，但是当我想通过“插入”工具栏按钮添加记录时，我得到一个空行。

这是我的模型和视图。任何帮助将不胜感激。

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));

更新

我已经尝试过@howcheng 提供的建议，但这会使复选框如下所示：

[object Object],[object Object],[object Object],[object Object]

我通过 Ajax 返回的数据看起来有效，即使它在下面看起来不正确。有什么想法吗？

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

您所做的是定义一个显示模板。为了进行编辑，您需要一个自定义编辑器模板。在 /Views/Shared/EditorTemplates 目录中创建一个局部视图，并将其命名为“CustomerRoles.cshtml”。

编辑器模板：

@model CustomerRoleModel[]
@foreach (CustomerRoleModel crm in Model)
{
  // checkbox code goes here
}

网格代码：

@(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 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;
}

在您的 Google 搜索中，您可能会遇到 the Telerik documentation -- 不要依赖它，因为它有点过时（它不是为 Razor 编写的，您不需要使用 [UIHint] 属性，例如）。