This is a migrated thread and some comments may be shown as answers.

Checkbox Editing In Grid Row Where Checkbox Always Displays

6 Answers 525 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 28 Apr 2015, 05:06 PM

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?

 

 

6 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 30 Apr 2015, 08:15 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
John
Top achievements
Rank 1
answered on 28 May 2015, 03:03 PM
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?
0
Accepted
Boyan Dimitrov
Telerik team
answered on 01 Jun 2015, 10:44 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
John
Top achievements
Rank 1
answered on 01 Jun 2015, 06:55 PM
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?
0
Boyan Dimitrov
Telerik team
answered on 03 Jun 2015, 02:55 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
John
Top achievements
Rank 1
answered on 17 Jun 2015, 03:19 PM

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

 

 

Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
John
Top achievements
Rank 1
Share this question
or