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编写的，您不需要使用{{1例如，}。}。

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

更新

1 个答案: