checkbox column template

1 Answer 7727 Views
Grid
Luca
Top achievements
Rank 1
Luca asked on 15 Mar 2013, 04:51 PM
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

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 15 Mar 2013, 05:46 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
DHHS
Top achievements
Rank 1
commented on 31 Aug 2015, 09:28 PM

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
Telerik team
commented on 01 Sep 2015, 09:07 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
DHHS
Top achievements
Rank 1
commented on 01 Sep 2015, 04:02 PM

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

 

Thanks,

Veena

Terry
Top achievements
Rank 1
commented on 24 Aug 2016, 06:26 PM

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
Top achievements
Rank 1
commented on 25 Aug 2016, 09:38 PM

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
Top achievements
Rank 1
commented on 25 Aug 2016, 10:05 PM

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
Top achievements
Rank 1
commented on 25 Aug 2016, 10:47 PM

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 ? '&#x2611;' : '&#x2610;' #");
columns.Bound(col => col.MadeChoicePresets2IsSelected).Title(MadeChoicePresets2Title).ClientTemplate("<input type='checkbox' disabled='disabled' #=MadeChoicePresets2IsSelected ? checked='checked' : '' # />");


Ezequiel
Top achievements
Rank 2
commented on 17 Aug 2018, 01:34 PM

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
Top achievements
Rank 2
commented on 17 Aug 2018, 04:27 PM

I found the issue. I recently updated to the latest version and it was conflicting with the new checkbox functionality.
Tariq
Top achievements
Rank 1
commented on 29 Mar 2020, 08:44 PM

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
Top achievements
Rank 1
commented on 29 Mar 2020, 08:56 PM

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
Telerik team
commented on 01 Apr 2020, 05:57 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Luca
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or