How to set up Kendo UI mvc grid with checkbox control

Question

I am using Kendo UI MVC grid. One of the properties of the model is bool, so I need to present it in grid as checkbox. By default Kendo UI present it as "true" and "false" values in the column. So you need to first time to click to get checkbox, then second time to click to change value of the combobox. Instead of having default values from grid, I set ClientTemplate, so I got checkbox instead of "true" and "false" values.

              c.Bound(p => p.GiveUp)
                  .Title("Giveup")
                  .ClientTemplate("<input type='checkbox' id='GiveUp' name='GiveUp' #if(GiveUp){#checked#}# value='#=GiveUp#' />")
                  .Width(50);

This grid uses batch editing and in-grid editing (GridEditMode.InCell)

      .Editable(x => x.Mode(GridEditMode.InCell))
      .DataSource(ds => ds.Ajax()
                            .ServerOperation(false)
                            .Events(events => events.Error("error"))
                            .Batch(true)
                            .Model(model => model.Id(p => p.Id))
                            .Read(read => read.Action("Orders", "Order").Data("formattedParameters"))))

So what I would like to have is ability for user to click on checkbox and change value of my model, but unfortunately that doesn't work. I can see visually checkbox's value is changed but I don't see red triangle that marks cell as changed, and when I click on add new item button, value from checkbox disappear.

Please advice on what I am doing wrong.

Thanks in advance.

Tartuffe

Answer 1

Basically when you add/remove records from the Grid the red triangles always disappear (or when you sort/page/filter etc), the checkbox is not the problem with the red triangles.

Now for the checkbox if you create a ClientTemplate which is again a checkbox you will need to click one time to put the cell into edit mode (you will see no difference because the editor template is again a checkbox) so you will need to click second time to actually change the value.

What I suggest you as best practice is to use the approach covered here - it is way more faster (less operations for the Grid) and it easier than applying extra logic to handle the two clicks with the approach above.

Shrinkage

Thanks a lot. Works as expected. – Tartuffe

...but can you make the ClientTemplate column sortable? – Copyedit

Tip: The example application referred to in this post only works because other columns in the grid are editable. You need to, and probably should add regardless, the line "dataItem.dirty = true;" to the javascript on click function. – Cyprus

Answer 2

For those who would like to see how full code looks like.

Home.cshtml

    @(Html.Kendo().Grid<OrdersViewModel>()
          .Name("Orders")
          .Columns(c =>
          {
              c.Bound(p => p.Error)
                  .Title("Error")
                  .ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />")
                  .HtmlAttributes(new {style = "text-align: center"})
                  .Width(50);


<script>
    $(function() {
        $('#Orders').on('click', '.chkbx', function() {
            var checked = $(this).is(':checked');
            var grid = $('#Orders').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('Error', checked);
        });
    });
</script>

Tartuffe