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

Checkbox column with checkbox in header

13 Answers 1314 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Madzie
Top achievements
Rank 1
Madzie asked on 09 Nov 2013, 02:41 AM
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.

13 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 11 Nov 2013, 08:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Madzie
Top achievements
Rank 1
answered on 20 Nov 2013, 01:39 AM
Thanks for the help, I also looked at this example to get my stuff working - demo 
http://jsbin.com/uzinij/1/edit
0
Madzie
Top achievements
Rank 1
answered on 21 Nov 2013, 02:17 AM
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);
 }
}
});
0
Dimiter Madjarov
Telerik team
answered on 22 Nov 2013, 12:59 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Patrick
Top achievements
Rank 1
answered on 28 Jan 2015, 11:32 PM
Not really a close comparison.

 

0
Dimiter Madjarov
Telerik team
answered on 29 Jan 2015, 08:06 AM
Hi Patrick,


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

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fangming
Top achievements
Rank 1
answered on 23 Feb 2015, 10:38 PM
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.
0
Fangming
Top achievements
Rank 1
answered on 23 Feb 2015, 11:18 PM

I added an example as the following.
The checkbox will never be able to be checked...
http://dojo.telerik.com/aXaHA
0
Dimiter Madjarov
Telerik team
answered on 24 Feb 2015, 08:19 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fangming
Top achievements
Rank 1
answered on 24 Feb 2015, 06:53 PM
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!
0
Dimiter Madjarov
Telerik team
answered on 25 Feb 2015, 07:48 AM

Hello Fangming,

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

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sean
Top achievements
Rank 1
answered on 01 Mar 2017, 10:11 PM

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>

0
Stefan
Telerik team
answered on 03 Mar 2017, 01:47 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Madzie
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Madzie
Top achievements
Rank 1
Patrick
Top achievements
Rank 1
Fangming
Top achievements
Rank 1
Sean
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or