代码之家  ›  专栏  ›  技术社区  ›  crgolden

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

  •  0
  • crgolden  · 技术社区  · 6 年前

    我正在尝试为包含复选框功能的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,然后复选框/行选择显然只对第一行有效。

    最好的方法是什么?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Steve Greene    6 年前

    模板是在构建网格时生成的,因此正如您所看到的,ID总是相同的。您需要的是进行数据绑定,这样kendo将用每个记录替换ID。我使用带有前缀的实体键,如“cb_uuuufor”复选框:

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