將復選框列添加到劍道網格

Question

我有一個劍道網格，它最初有一組列，我試圖向其中添加兩個復選框列。

<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);
    });
});