为什么自定义复选框不显示在 Kendo 网格上

Question

我正在 kendo 网格中添加我自定义的复选框，但它并没有在所有浏览器中准确显示。

这是图片

这是我的网格

 @(Html.Kendo().Grid<Days>()
       .Name("timegrid")
       .DataSource(d => d.Ajax().Read("DayGrid", "Day").Model(keys =>
       {
           keys.Id(k => k.DayId);
           keys.Field(c => c.DayName).Editable(false);
           keys.Field(c => c.DayId).Editable(false);
       }).PageSize(7))
                       .Columns(c =>
                       {
                           c.Bound(p => p.DayId).Width(100).Title(" ").Template(templateAction => templateAction.DayId).ClientTemplate("#= chk2(data) #").Sortable(false);
                           c.Bound(e => e.DayName).Width("auto").Title("Day");
                       })
        )

我这里使用的是客户端模板

function chk2(data) {
    return '<label class="tree-node-selector"><input type="checkbox"/><i class="fa tree-node-icon"></i></label>';

}

我该如何解决这个问题？

Answer 1

我在这里找到了答案，我想分享它。

这是我的网格

@( Html.Kendo().Grid<MockUpForeNet.Controllers.CardDetailController.Days>()
 .Name("timegrid")
 .DataSource(d => d.Ajax().Read("TimeGridBinding", "CardDetail").Model(keys =>
 {
     keys.Id(k => k.DayId);
     keys.Field(c => c.DayName).Editable(false);
     keys.Field(c => c.DayId).Editable(false);
 }).PageSize(7))
           .Columns(c =>
           {
               c.Bound(p => p.DayId).Width(100).Title(" ").ClientTemplate("#= chk2(data) #").Sortable(false);
               c.Bound(e => e.DayName).Width("auto").Title("Day");
           })
   .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
   .Sortable()
   .ColumnMenu()
)

这是我的客户端模板

function chk2(data) {
    return '<input id="masterCheck' + data.DayId + '" class="k-checkbox" type="checkbox" checked="checked" /><label for="masterCheck" class="k-checkbox-label"></label>';
}

为什么自定义复选框不显示在 Kendo 网格上

Why customized checkbox not display on Kendo Grid

html

javascript

kendo-ui

kendo-grid