Grid Toolbar and Column as Checkbox

3 posts, 0 answers
  1. Su Ming
    Su Ming avatar
    2 posts
    Member since:
    Apr 2016

    Posted 21 Apr Link to this post

    Hi All

    Am recently starting to work with Kendo Grid (i'm new to MVC) and had the following requirement.

    1) A tool bar that contains the Save and Cancel Button, as well as a filter for months

    So i did the following

    .ToolBar(toolbar =>
                    <div class="toolbar">
                        <label class="fismonth-lable" for="fiscalmonth">Show fiscal months:</label>
                                .Events(e => e.Change("fiscalmonthChange"))
                                .HtmlAttributes(new { style = "width:150px;" })
                                .DataSource(ds =>
                                    ds.Read("Toolbar_FiscalMonth", "Home");

    But only the dropdown showed up. Am i missing something?


    Secondly, i have a Boolean column that i wish to be displayed and edited as a checkbox. This is what i did

    columns.Bound(p => p.IsSelectedForValidation).Filterable(false).Title("").ClientTemplate("<input type='checkbox' #= IsSelectedForValidation? checked='checked' : '' #  id='#=ID#'></input>").Width(30);

    It does show as a checkbox, and i can check and uncheck it, but the "real" editing will still take place as a dropdown of "true/false". Am i missing something?


    Thank you so much for your kind help.



    Su Ming

  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    1728 posts

    Posted 26 Apr Link to this post

    Hello Su Ming,

    Straight to your questions: 

      1. Please refer to the Combine custom toolbar template with default batch edit toolbar. that demonstrates how to achieve the desired behavior. 

       2. My suggestion is to define a template column in order to avoid switching to edit mode, when the cell is clicked. In order to define a column as template column in the context of MVC you can use: 

    columns.Template(@<text></text>).ClientTemplate("<input id='checkbox' onclick='parentChkBoxClick(this);' class='chkbxq' type='checkbox' />").Width(30);

    Additionally in order to update the underlying model using this check box you can use the approach demonstrated in the Use Checkbox Column Templates and Edit how-to article. 

    Boyan Dimitrov
    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
  3. DevCraft R3 2016 release webinar banner
  4. Su Ming
    Su Ming avatar
    2 posts
    Member since:
    Apr 2016

    Posted 27 Apr in reply to Boyan Dimitrov Link to this post

    Hi Boyan

    Thank you so much for your help! It works!


    Su Ming

Back to Top