checkbox column template

9 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
    2159 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. UI for ASP.NET MVC is VS 2017 Ready
  4. 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>

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 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
  6. 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

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

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

  8. Peter
    Peter avatar
    8 posts
    Member since:
    Mar 2016

    Posted 25 Aug 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?

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

    Posted 25 Aug in reply to Peter 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' :'' # />");

  10. Peter
    Peter avatar
    8 posts
    Member since:
    Mar 2016

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


Back to Top
UI for ASP.NET MVC is VS 2017 Ready