Question

我有一个kendo网格，该网格最初具有一组列，我正尝试向它们添加两个复选框列。

<script id="sectionPage" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<SectionPageModel>()
                .Name("grid_#=SectionID#")
                .HtmlAttributes(new { @class = "detail-grid" })
                .Columns(columns =>
                {
                    columns.Select().Width(60);
                    columns.Bound(o => o.SectionPageID).Hidden(true);
                    columns.Bound(o => o.SectionID).Hidden(true);
                    columns.Bound(o => o.PageID).Hidden(true);
                    columns.Bound(o => o.PageCD).EditorTemplateName("PageCDDropDown").Title("Page").Width(225);
                    columns.Bound(o => o.PageTitle).Hidden(true);
                    columns.Bound(o => o.PageTitleOverride).Width(300);
                    columns.Bound(o => o.AccountID).Hidden(true);
                    columns.Bound(o => o.AccountCD).EditorTemplateName("AccountCDAutoComplete").Width(120).Title("Account");
                    columns.Bound(o => o.EffectiveDate).Format("{0:MM/dd/yyyy}").Width(60).Hidden(true);
                    columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}").Width(60).Hidden(true);
                    columns.Bound(o => o.SPSortOrder).ClientTemplate("<span class='spSortSpan'>\\#if(SPSortOrder != null) {\\# \\#=SPSortOrder\\# \\#} else {\\# \\#=0\\# \\#}\\#</span>").Title("Sort Order");
                    columns.Bound(o => o.AddedBy);
                    columns.Bound(o => o.AddedOn).Format("{0:MM/dd/yyyy}");
                    columns.Bound(o => o.UpdatedBy);
                    columns.Bound(o => o.UpdatedOn).Format("{0:MM/dd/yyyy}");
                    columns.Bound(o => o.FirstRun).ClientTemplate("<input id='FirstRun' name='FirstRun' class='chkbx'  type='checkbox'  #= FirstRun ? checked='checked' : '' #/>").Title("First Run").Width(110);
                    columns.Bound(o => o.SecondRun).ClientTemplate("<input id='SecondRun' name='SecondRun' type='checkbox' #= SecondRun ? checked='checked' : '' # class='chkbx'/>").Title("Second Run").Width(110);
                })
                         .ToolBar(toolbar =>
                    {
                        toolbar.Create().Text("Add Page");
                        toolbar.Save().SaveText("Save Pages");
                    })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                        .Events(e => e.DataBound("detailGrid_onDataBound"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model =>
                                {
                                    model.Id(f => f.SectionPageID);
                                    model.Field(f => f.PageTitle).Editable(false);
                                    model.Field(f => f.AddedOn).Editable(false);
                                    model.Field(f => f.AddedBy).Editable(false);
                                    model.Field(f => f.UpdatedOn).Editable(false);
                                    model.Field(f => f.UpdatedBy).Editable(false);
                                }
                            )
                    .ServerOperation(false)
                     .Read(read => read.Action("SectionPage", "Document", new { sectionID = "#=SectionID#" }))
                     .Create(create => create.Action("SectionPage_Create", "Document").Data("detailGrid_onAdditionalData"))
                     .Update(update => update.Action("SectionPage_Create", "Document"))
                     .Destroy(delete => delete.Action("SectionPage_Delete", "Document"))

                )
                .Scrollable()
                .Sortable()
                .Events(e => e.SaveChanges("detailGrid_onSaveChanges"))
                .ToClientTemplate()

    )
</script>

在以下两行中添加了两个复选框：

 columns.Bound(o => o.FirstRun).ClientTemplate("<input id='FirstRun' name='FirstRun' class='chkbx'  type='checkbox'  #= FirstRun ? checked='checked' : '' #/>").Title("First Run").Width(110);
 columns.Bound(o => o.SecondRun).ClientTemplate("<input id='SecondRun' name='SecondRun' type='checkbox' #= SecondRun ? checked='checked' : '' # class='chkbx'/>").Title("Second Run").Width(110);

如果没有这两行，网格将正常显示，但是将这两行相加会导致以下错误：

Invalid template:'    <div class="k-widget k-grid detail-grid" id="grid_#=SectionID#"><div class="k-header k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&grid_%23%3DSectionID%23-mode=insert"><span class="k-icon k-i-add">....

当我从两个标签（#= FirstRun ?checked='checked' : '' #和#= SecondRun ? checked='checked' : '' #）中删除三元运算符时，不会引发错误。

将两个复选框列添加到此网格的正确方法是什么？

Answer 1

尝试在\\内添加三元运算，

columns.Bound(o => o.FirstRun)
    .ClientTemplate("<input id='FirstRun' name='FirstRun' class='chkbx'  type='checkbox'  \\#= FirstRun ? checked='checked' :'' \\# />")
    .Title("First Run").Width(110);

columns.Bound(o => o.SecondRun)
    .ClientTemplate("<input id='SecondRun' name='SecondRun' type='checkbox' \\#= SecondRun ? checked='checked' :'' \\# class='chkbx'/>")
    .Title("Second Run").Width(110);

Answer 2

实际上我必须对此进行一些更改-可能是因为我正在使用Kendo MVC 2019.3.1023

这是我的复选框列

columns.Bound(p => p.Send).Title("Send")
                            .ClientTemplate("<input class='chkbx' type='checkbox' ${ Send == true ? checked='checked' : ''}  />");

在网格下方，我必须添加此脚本

$(function () {
    $('#grid').on('click', '.chkbx', function () {
        var checked = $(this).is(':checked');
        var grid = $('#grid').data().kendoGrid;
        var dataItem = grid.dataItem($(this).closest('tr'));
        dataItem.set('Send', checked);
    });
});

将复选框列添加到Kendo网格

2 个答案: