Checkbox column with checkbox in header

[Madzie]

Looking for a good example where there is a column with checkbox and its header is also checkbox - The header checkbox, when checked/unchecked checks/unchecks all the checkboxes in that column.
Also, how to bind the checkbox to a particular column ?
I am writing like :
columns: [
{
name: 'check',
command: [
{
name: 'select',
template: '<input type=\'checkbox\'  />',
 }
]
},
{ field: "IsSelected", hidden:true},
{ field: "CNumber", title: "Number ", editable: true, width: 150, },

I would like the IsSelected to be bound to the checkbox, so that if the checkbox is checked, IsSelected should be binded to true and false if unselected. Is that possible ???
And on header check, we actually update the IsSelected and hence all the checkboxes state changes based on the value of IsSelected.

[Dimiter Madjarov]

Hello Madhuri,


You could take a look at the following Code Library, which demonstrates a sample approach to achieve this. It is using the MVC Grid, but the approach is basically the same i.e. you should define a template and a header template for the column with checkboxes and bind to their click events in order to execute the custom logic.

I hope that this example will be helpful for you.

Regards,
Dimiter Madjarov
Telerik

[Madzie]

Thanks for the help, I also looked at this example to get my stuff working - demo 
http://jsbin.com/uzinij/1/edit

[Madzie]

Another issue that observed that hits the performance with header checkbox is - it is being called every time for all the rows !! The code I used seems to be the problem actually.
The header check event is handled in databound event of Grid.
Can someone help resolve this thing : Say there are 10 records in grid, when header check is clicked, first time it calls the click event for 10 times and then if user unchecks the header checkbox, it calls 20 times, and then so on for next clicks 30, 40 ...
This is quite urgent, please help me find a better way !

dataSource: {}, //datasource is set by other method
columns: [
{
field: "IsSelected",
width: 100,
filterable: false,
sortable: false,
template: '<input type=\'checkbox\' #= IsSubmittable ? \'\' :\'disabled\' # #= IsSelected ? \'checked\' : \'\'#/>',
headerTemplate: '<label><input type=\'checkbox\' id=\'checkAll\'/></label>',
},
dataBound: function (e) {
var grid = this;
self.gridReference(this);
var allRows = grid.table.find("tr");

 $("#checkAll").click(function (e) {
     var $cb = $(this);
    var checked = $cb.is(':checked');
    var result = grid.table.find("tr").find("td:first input").closest("tr");

result.each(function (index, row) {
   var selectedItem = grid.dataItem(row);
   if (selectedItem != null && selectedItem.IsSubmittable != null) {
   if (selectedItem.IsSubmittable) {
   selectedItem.set('IsSelected', checked);
 }
}
});

[Dimiter Madjarov]

Hello Madhuri,


Attaching events in the dataBound event handler should be avoided, because of the described problem. Please follow the approach from the Code Library and attach the events on document ready.

Regards,
Dimiter Madjarov
Telerik

[Patrick]

Not really a close comparison.

 

[Dimiter Madjarov]

Hi Patrick,


Let us know if you are experiencing any issues similar to the discussed one.

Regards,
Dimiter Madjarov
Telerik

 

 

[Fangming]

This approach seems working.

But my problem is clicking on the header is conflicting with clicking on checkbox.

I need that column to be sortable and be able to be clicked on checkbox.

[Fangming]

I added an example as the following.
The checkbox will never be able to be checked...
http://dojo.telerik.com/aXaHA

[Dimiter Madjarov]

Hello Fangming,

The reason for the issue is that preventDefault is invoked. Only stopping the propagation should achieve the desired behavior. Here is an example of this.

Regards,
Dimiter Madjarov
Telerik

 

 

[Fangming]

Hello Dimiter,

Thanks so much for your reply! It's working now.

However, I met another issue. What I was trying to do is add one checkbox for each of the header, and only one checkbox can be selected at one time.

Can you take a look at the example below.
http://dojo.telerik.com/aXaHA/7
Click on one checkbox, should uncheck all the other ones. but it does not work. (actually it only worked at first time) :)

Thanks again for your help!

[Dimiter Madjarov]

Hello Fangming,

You could use the ng-checked directive instead of ng-model. Here is the updated example.

Regards,
Dimiter Madjarov
Telerik

 

 

[Sean]

Hi Dimiter Madjarov,

I am using Kendo UI for Angular 2 and I am trying to add a checkbox to one of my kendoGridHeaderTemplate like below in bold.

Regardless of the data binding, checkbox shows check mark when I click it if I put the input checkbox outside the Kendo Grid. But check mark never appears when I put it inside the kendoGridHeaderTemplate. Do you have any advice on this?

 

 

<kendo-grid-column field="isSelected" title="" [width]="150" [locked]="true">

<template kendoGridHeaderTemplate>
    Select all <input type="checkbox"/>
</template>
<template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<input type="checkbox" style="zoom: 1.5;" (click)="rowSelected(dataItem.isSelected, rowIndex, dataItem)" [(ngModel)]="dataItem.isSelected"> {{dataItem.isSelected}}
</template>
</kendo-grid-column>

[Stefan]

Hello Sean,

As the Kendo UI for Angular 2+ has its specifics, I can suggest opening a support thread with the correct product and the relevant team will handle the request accordingly.

Also, I can recommend sending a small runnable example in Plunker demonstrating the issue, as this can help providing a suggestion best suited for it.

Thank you in advance.

Regards,
Stefan
Telerik by Progress