Checkbox Editing In Grid Row Where Checkbox Always Displays

[John]

I have not been able to find an example of displaying boolean fields as checkboxes in a Grid.  The example on this page (http://demos.telerik.com/aspnet-mvc/grid/editing) works fine but I want the column to always display the checkboxes not just display them when you click in a cell.  Is this possible using Razor syntax?

 

 

[Boyan Dimitrov]

Hello John,

I would suggest to check our CheckBox Column and InCell Editing code library which demonstrates how to create a template column which displays checkboxes for a boolean value and how to change the underlying model with a single click.

Regards,
Boyan Dimitrov
Telerik

 

 

[John]

Displaying boolean fields as checkboxes works fine with that example as does saving when you select or deselect all.  However, changing one check box and saving it does not work because it does not get flagged as "dirty".  Is there an example of using a column template and setting the column to dirty if it is edited?

[Boyan Dimitrov]

Hello John,

You can modify the click event of the checkboxes to not use the set method of the model in order to avoid redrawing the grid:

$('#persons').on('click', '.chkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#persons').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));

            dataItem.IsAdmin = checked;
            dataItem.dirty = true;

            var td = $(this).parent();

            td.addClass('k-dirty-cell');
            $('<span class="k-dirty"></span>').insertBefore($(this));
        })

Also in this case the dirty cell indicator should be added as shown in the code above. 

Regards,
Boyan Dimitrov
Telerik

 

 

[John]

That worked great.  One more minor issue I have is that the checkboxes should be read only unless the row is in Edit mode.  I am using GridEditMode.InLine.  Is there a way to do that?

[Boyan Dimitrov]

Hello John,

In this case you can use the ClientTemplate and EditorTemplate in order to show different element in edit and read only mode. 

Regards,
Boyan Dimitrov
Telerik

 

 

[John]

I ended up doing this for the checkbox column based on an answer in StackOverflow.   Exactly what I needed.

columns.Bound(b => b.IsActive).ClientTemplate("<input type='checkbox' ${ IsActive == true ? checked='checked' : ''} disabled />");

StackOverFlow Post