Question

我正在尝试为包含复选框功能的Kendo UI网格创建自定义行模板。我有这样创建的网格：

@(Html.Kendo().Grid(Model.Users)
              .Name("usersGrid")
              .Columns(columns =>
              {
                  columns.Select().Width(50);
                  columns.Bound(c => c.UserName);
              })
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .ServerOperation(false))
              .ClientRowTemplate(UsersClientTemplate))

具有生成行模板的功能，如下所示：

Func<Grid<User>, string> UsersClientTemplate = (grid) =>
{
    var id = Guid.NewGuid();
    return @"<tr data-uid='#:uid#' role='row'>" +
           "<td role='gridcell'>" +
           $"<input class='k-checkbox' data-role='checkbox' type='checkbox' id={id}>" +
           $"<label class='k-checkbox-label k-no-text' for={id}></label>" +
           "</td>" +
           "<td role='gridcell'>" +
           "<a href='/users/details/#:data.Id#'>#:data.UserName#</a>" +
           "</td>" +
           "</tr>";
};

问题是我不知道如何为每一行的模板生成唯一的ID。如果我没有在复选框id元素上包括input属性，而在复选框for元素上没有label属性，则复选框/行选择无效。但是使用上面的函数，每个行模板都会生成相同的ID，然后复选框/行选择显然仅适用于第一行。

有什么更好的方法？

Answer 1

在构建网格时会生成模板，因此您已经看到ID始终相同。您想要的是数据绑定，因此kendo用每个记录替换id。我将带有“ cb_”之类前缀的实体密钥用于复选框：

       $"<input class='k-checkbox' data-role='checkbox' type='checkbox' id='cb_#:uid#'>" +
       $"<label class='k-checkbox-label k-no-text' for='cb_#:uid#'></label>" +

Kendo UI网格的自定义行/复选框模板

1 个答案: