【问题标题】:Why customized checkbox not display on Kendo Grid为什么自定义复选框不显示在 Kendo Grid 上
【发布时间】:2020-02-21 15:23:07
【问题描述】:

我在我的剑道网格中添加了我的自定义复选框,但它并没有在所有浏览器中完全显示。

这是图片

这是我的网格

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

}

我该如何解决这个问题?

【问题讨论】:

  • 我从您的其他帖子中得知您已经解决了这个问题 - 您可以为未来的用户发布您的答案吗?

标签: javascript html kendo-ui kendo-grid


【解决方案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>';
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-07-10
    • 1970-01-01
    • 2017-06-19
    • 1970-01-01
    • 2016-01-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多