checkbox column template

14 posts, 0 answers
  1. Luca
    Luca avatar
    3 posts
    Member since:
    Jan 2012

    Posted 15 Mar 2013 Link to this post

    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
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 15 Mar 2013 Link to this post

    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!
  3. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 31 Aug 2015 Link to this post

    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>

  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 01 Sep 2015 Link to this post

    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
  5. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 01 Sep 2015 Link to this post

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

     

    Thanks,

    Veena

  6. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 24 Aug 2016 Link to this post

    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' :'' # />");

  7. Magnus
    Magnus avatar
    8 posts
    Member since:
    Mar 2016

    Posted 25 Aug 2016 in reply to Terry Link to this post

    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?

  8. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 25 Aug 2016 in reply to Magnus Link to this post

    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' :'' # />");

  9. Magnus
    Magnus avatar
    8 posts
    Member since:
    Mar 2016

    Posted 25 Aug 2016 in reply to Terry Link to this post

    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' : '' # />");


  10. Ezequiel
    Ezequiel avatar
    44 posts
    Member since:
    Oct 2011

    Posted 17 Aug 2018 Link to this post

    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.

  11. Ezequiel
    Ezequiel avatar
    44 posts
    Member since:
    Oct 2011

    Posted 17 Aug 2018 in reply to Ezequiel Link to this post

    I found the issue. I recently updated to the latest version and it was conflicting with the new checkbox functionality.
  12. Tariq
    Tariq avatar
    5 posts
    Member since:
    Mar 2020

    Posted 29 Mar 2020 in reply to Dimiter Madjarov Link to this post

    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

     

     

     
  13. Tariq
    Tariq avatar
    5 posts
    Member since:
    Mar 2020

    Posted 29 Mar 2020 Link to this post

    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>

     
  14. Martin
    Admin
    Martin avatar
    276 posts

    Posted 01 Apr 2020 Link to this post

    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.
Back to Top