Adding checkbox columns to kendo grid

Question

I have a kendo grid that originally had a set of columns to which I'm trying to add two checkbox columns.

<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>

The two checkboxes are being added in the following two lines:

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

Without those two lines, the grid is rendered normally, but adding the two lines causes the following error:

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">....

When I remove the ternary operator from both tags (#= FirstRun ?checked='checked' : '' # and #= SecondRun ? checked='checked' : '' #), the error is not raised.

What is the correct way to add the two checkbox columns to this grid?

J M · Accepted Answer · 2018-12-06 04:58:58Z

2

Try adding the ternary operations inside \\ ,

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

answered Dec 6, 2018 at 4:58

J M

4618 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Huey · Accepted Answer · 2020-06-10 13:50:50Z

1

Actually I had to change this a bit - it may be because I am using Kendo MVC 2019.3.1023

this was for my check box column

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

and below my grid I had to add this script

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

answered Jun 10, 2020 at 13:50

Huey

111 bronze badge

Collectives™ on Stack Overflow

Adding checkbox columns to kendo grid

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related