checkbox column template

[Luca]

Hi,
I have various columns in different Kendo grids binded to a boolean field of my Sql database (using Ajax binding).

I'd like to view and to edit each boolean field using simple checkbox .
I've read the forum and the examples (custom editor and your FAQ) but I wonder if it's possibile to write a custom editor template "Checkbox" similar to "DateTime" or to "GridForeignKey" and use it in each boolean column . 
Is it possibile?

Thanks in advance,

Luca

[Dimiter Madjarov]

Hello Luca,


The editor template for boolean values is a checkbox by default. If you would also like to display the checkbox instead of the true/false values, you could specify a client template.

E.g.

columns.Bound(p => p.Discontinued).ClientTemplate("<input type='checkbox' #= Discontinued ? checked='checked' :'' # />");

 

Greetings,
Dimiter Madjarov
the Telerik team

[DHHS]

Hi Dimiter,

 

Is there any way that i can bind the check box in the grid. I have a hierarchical grid, in which I have a check box in child grid. When i try to put client template for the check box in the child grid, since the child grid is already a detail template and I am trying to put client template it is throwing error. Is there any way i can bind in some other way.

 

  <div class="container-fluid">
        <div class="row">
            <div class="col-xs-18 col-md-12">
                @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.ContractorType).Title("Type").Width(70);
                    columns.Bound(p => p.ContractorName).Title("Contractor Name").Width(150);
                    columns.Bound(p => p.BHSISNum).Width(120);
                    columns.Bound(p => p.IsParent).Width(80).Title("Is Parent").ClientTemplate("<input type='checkbox' disabled='disabled' #= IsParent ? checked='checked': '' # class='chkbx' />").HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.ParentName).Title("Parent Name").Width(150);
                    //columns.Bound(p => p.ContractorIsAlsoRegion).Width(80).Title("Is Region").ClientTemplate("<input type='checkbox' disabled='disabled' #= ContractorIsAlsoRegion ? checked='checked': '' # class='chkbx' />").HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}").Width(100);
                    columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}").Width(100);

                    columns.Command(command => command.Custom("Remove").Text("Remove").SendDataKeys(true).Click("deleteClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" })).Width(100);

                })
                .Events(e => e.DataBound("onDataBound"))
                .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
                .Sortable()
                .Scrollable()
                .Filterable()
                .Selectable()
                .Resizable(resize => resize.Columns(true))
                .ClientDetailTemplateId("template")
                .HtmlAttributes(new { style = "height:450px;" })
                .DataSource(dataSource => dataSource.Ajax().PageSize(10).Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo")).Model(model => model.Id(p => p.Id))))
            </div>
        </div>
    </div>


// My child grid

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
            .Name("grid_#=Id#")
            .Columns(columns =>
            {
                columns.Bound(o => o.ServiceId).Hidden(true);
                columns.Bound(p => p.ServiceName);
                columns.Bound(o => o.ServiceType);
                columns.Bound(o => o.AdultChild);
                columns.Bound(o => o.Qualifier);
                columns.Bound(o => o.ServiceModifier);
                columns.Bound(o => o.WomenSetAside).Title("Women Set Aside"); // this is my check box
                columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.BudgetParent).Width(80).Title("Budget Parent"); // this is my check box
                columns.Bound(p => p.ProcedureParent).Width(80).Title("Procedure Parent"); // this is my check box
                //columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}");
                columns.Command(command => command.Custom("Delete").Text("Remove").SendDataKeys(true).Click("deleteClickServices").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" }));
            })
            .Events(e => e.DataBound("onDataBoundServices"))
            .ToolBar(toolbar =>
            {
                toolbar.Template(@<text>
                    <div class="toolbar">
                        <button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Assign Services</button>
                    </div></text>);
            })
                .DataSource(dataSource => dataSource.Ajax().PageSize(10).Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#", contractId = ViewBag.ContractService.Id })))
                .Resizable(resize => resize.Columns(true))
                .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
                .Sortable()
                .ToClientTemplate()
    )
</script>

[Dimiter Madjarov]

Hello DHHS,

When a client template is used inside a detail Grid, the hash symbols of the Kendo UI template syntax should be escaped.
E.g.

columns.Bound(p => p.Discontinued).ClientTemplate("<input type='checkbox' \\#= Discontinued ? checked='checked' :'' \\# />");

Let me know if this was the reason for the issue in the current case.

Regards,
Dimiter Madjarov
Telerik

[DHHS]

Yes Dimiter. It does work. Thanks you and sorry i missed that.

 

Thanks,

Veena

[Terry]

For anyone else who finds this post.  I cut and pasted exactly what Dimiter said.  That worked.  But the checkbox field was open for changes when the grid wasn't in Edit mode.  My grid has inline editing.  So I added disabled='disabled'.  And now the checkbox field can only be entered when the grid is in Edit mode.

columns.Bound(c => c.Inactive).ClientTemplate("<input type='checkbox' disabled='disabled' #= Inactive ? checked='checked' :'' # />");

[Magnus]

Hi, it quite doesn't make it for me. I use MVC Core 1.0 RC1-final, and it seems like the Razor engine treats everything after the '=' sign as an attribute value and places it between quotation marks.

This code

columns.Bound(col => col.MadeChoicePresets2IsSelected).ClientTemplate("<input type='checkbox' disabled='disabled' \\#=MadeChoicePresets2IsSelected ? checked='checked' : '' \\# />");

renders like this:

<input type="checkbox" disabled="disabled" #="MadeChoicePresets2IsSelected" ?="" checked="checked" :="" ''="">

Note the extra " and the missing / at the final > that terminates the input element. I've tried I think all variants of @: and <text>, butto no avail. What am I missing here?

[Terry]

I'm not using MVC Core - so that could be the difference.

But, I don't have the slashes you have in yours.  Here's the exact code I have.  It's working.  Good luck.

columns.Bound(c => c.Inactive).ClientTemplate("<input type='checkbox' disabled='disabled' #= Inactive ? checked='checked' :'' # />");

[Magnus]

Yes I was confused, Dimitri said that the # had to be escaped, but when I look at your code now, it's not escaped. Took me hours to spot. Maybe it has something to do with versions of Visual Studio, or Razor engine, or Telerik version. Anyway, now I have a working sample showing both techniques, first with a string replacement using some Unicode characters instead of 'Yes' and 'No', second with your disabled checkbox.

columns.Bound(col => col.MadeChoicePresets1IsSelected).Title(MadeChoicePresets1Title).ClientTemplate("#=MadeChoicePresets1IsSelected ? '☑' : '☐' #");
columns.Bound(col => col.MadeChoicePresets2IsSelected).Title(MadeChoicePresets2Title).ClientTemplate("<input type='checkbox' disabled='disabled' #=MadeChoicePresets2IsSelected ? checked='checked' : '' # />");

[Ezequiel]

Hi,

I have a this;

01.@(Html.Kendo().Grid<EntityViewModel>()
02.         .Columns(cols =>  {
03.         cols.Template(@<text></text>).ClientTemplate("<input name='row-check' id='#=Id#' type='checkbox' value='#=Id#' class='k-widget'/>")
04.                  .HeaderTemplate("<input type='checkbox' id='check-all' class='k-widget' onclick='Functions.checkAll(this);'/>")
05.                  .HtmlAttributes(new { style = "align: center" });
06.         cols.Bound(c => c.Id);
07.         cols.Command(cmd =>{
08.                  cmd.Edit().UpdateText("Save");
09.                  cmd.Destroy();
10.         }).HtmlAttributes(new { style = "width: 140px" });
11.}).Editable(ed => ed.Mode(GridEditMode.InLine)))

 

When I try to edit, I'm getting a javascript error on kendo.all.js:

Unhandled exception at line 1386, column 1 in Function code
0x800a1391 - JavaScript runtime error: 'check' is undefined occurred

 

I've tried with the ClientTemplate on the Id column (and it is set as m.Field(f => f.Id).Editable(false); ) but got the same result.

If I remove that ClientTemplate with the checkbox, it works properly.

How can I solve this?

 

Thanks.

[Ezequiel]

I found the issue. I recently updated to the latest version and it was conflicting with the new checkbox functionality.

[Tariq]

I was Tray .ClientTemplate("<input type='checkbox' #= Discontinued ? checked='checked' :'' # />") but grid get blank no datadisply

code

columns.Bound(p => p.EnableValue).Title("ON/OFF").Width(8); working fine

columns.Bound(p => p.EnableValue).Title("ON/OFF").ClientTemplate("<input type='checkbox' #= Discontinued ? checked='checked' :'' # />") ; no data display

 

 

 

[Tariq]

in following code check box display checked when data is false but it showing true

<div class="row clearfix">
                                               @(Html.Kendo().Grid<HBLTradeInKendoUIBootstrap.Models.HBLTradeInSecurityViewModel>()
                                                .Name("grid")

                                                    .HtmlAttributes(new { @class = "ra-section" })
                                                    .Columns(columns =>
                                                    {
                                                        columns.Bound(p => p.ID).Title("ID").Width(5);                                                ;
                                                        columns.Bound(p => p.Security).Title("Security ID").Width(15); //.Locked(true).Lockable(false); ;
                                                        columns.Bound(p => p.EnableValue).Title("ON/OFF").Width(8).ClientTemplate("<input type='checkbox' \\#= Active ? checked='checked' :'' \\# />"); ;
                                                        columns.Bound(p => p.S_MAT_DATE).Title("Mat. Date").Width(11);
                                                        columns.Bound(p => p.DaystoMaturity).Title("DTM").Width(8);
                                                        columns.Bound(p => p.LongValue).Title("Long").Width(8);//.Filterable(ftb => ftb.Multi(true)); ;
                                                        columns.Bound(p => p.SizeMM1).Title("Size MM").Width(12);
                                                        columns.Bound(p => p.Bid).Title("Bid").Width(8);
                                                        columns.Bound(p => p.Ask).Title("Ask").Width(8);
                                                        columns.Bound(p => p.SizeMM2).Title("Size MM").Width(12);
                                                        columns.Bound(p => p.ShortValue).Title("Short").Width(8)// .ClientTemplate("<input type='checkbox' disabled='disabled' #=MadeChoicePresets2IsSelected ? checked='checked' : '' # />");
                                                        columns.Bound(p => p.MinAmt).Title("Min Amt.").Width(6);
                                                        columns.Bound(p => p.LastValue).Title("Last").Width(6);
                                                        columns.Command(command => { command.Edit(); }).Width(15);
                                                    })
                                                    //.ToolBar(toolbar => toolbar.Create())
                                                    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AdminCustomEdit"))
                                                    .Pageable()
                                                    .Sortable()
                                                    .Scrollable()

                                                    .HtmlAttributes(new { style = "height:500px;" })

                                                    .DataSource(dataSource => dataSource
                                                     .Ajax() //Specify that Ajax binding is used.
                                                     .Model(model =>{model.Id(p => p.ID);})
                                                     .Read(read => read.Action("GetAllSec", "Home")) // Set the action
                                                     .Update(update => update.Action("Update", "Home"))
                                                    ))
                                                    <script type="text/javascript">
                                                        function error_handler(e) {
                                                            if (e.errors) {
                                                                var message = "Errors:\n";
                                                                $.each(e.errors, function (key, value) {
                                                                    if ('errors' in value) {
                                                                        $.each(value.errors, function () {
                                                                            message += this + "\n";
                                                                        });
                                                                    }
                                                                });
                                                                alert(message);
                                                            }
                                                        }
                                                    </script>

                                            </div>

 

[Martin]

Hello Tariq,

Thank you for the provided code snippets.

Unfortunately I was not able to observe the issue you are experiencing. Could you please modify the attached project to reproduce the problem? I will then debug it and happily assist you.

Looking forward to your reply.

Regards,
Martin
Progress Telerik