Select All Checkbox

[Michael]

I'm trying to add a select all checkbox to the header to select/deselect all checkboxes.  The chkSelectAll checks all the checkboxes but doesn't correctly execute the checkbox handler I have below that stores the StudentID in an array.  I do not have the checkbox bound to a column, I just want to have them stored in the checked array. 

Also, my other problem is when the page is changed, the checkbox looses its state and becomes unchecked.  I would like to retain the checkbox state inbetween page selection.

KENDO GRID:
​ columns.Bound(m => m.StudentID)
.ClientTemplate("# if(StudentEmail != null) { # <input type='checkbox' class='chkbxq' name='checkedRecords' value='#= StudentID #' /> #} else {# <input type='checkbox' class='chkbxq' name='checkedRecords' value='#= StudentID #' disabled /> #} #").Title("").Width(40).HtmlAttributes(new { style = "text-align:center" }).ClientFooterTemplate("Total:")
.HeaderTemplate("<input type='checkbox' id='chkSelectAll' class='chkbxq' />").HeaderHtmlAttributes(new { style = "text-align:center" }).Sortable(false);

JAVSCRIPT:
var checked = {};

//handles select/deselect all checkboxes
​ $('#chkSelectAll').click(function() {
debugger;
$('.chkbxq:checkbox:not(:disabled)').prop('checked', this.checked);
});




​ // handle the click event of all checkboxes
$(this).delegate(":checkbox", "click", function () {
debugger;
// store the checked state of the record (this.value is set to the value of the StudentID property of the data item)
checked[this.value] = this.checked;
});

[Michael]

Also notice when I execute the chkSelectAll click event, I'm only selecting those checkboxes that are not disabled, this is a requirement.

[Petur Subev]

Hello Michael,

Checkboxes are demonstrated in the following code library,

http://www.telerik.com/support/code-library/checkbox-column-and-incell-editing

The only case that is not covered is that the header checkbox is not checked based on the checked checkboxes in the rows, however this could be easily implemented with the help of the dataBound event of the Grid.

Also I would like to note that autoSync of the dataSource is not enabled so checking the items won't be persisted on the database without explicitly clicking the Save Changes button (other way when you switch pages changes will be lost).

I modified the code library project to demonstrate the case.

I hope this helps.

Kind Regards,
Petur Subev
Telerik

 

 

[Michael]

In that example, you have 3 rows.  I put 15 rows and enabled paging..5 rows per page.  When I click on the header checkbox to select all, the rows in pages 2 & 3 are not checked.  I would assume if a user checks the select all checkbox all checkboxes on all pages would be selected.  How would I go about select/deselecting all rows regardless of paging?

[Michael]

Also, when I go from page to page, the checkboxes are not retained...

[Petur Subev]

Hello Michael,

The checkboxes on the different pages are not checked because does pages does not exist on the client. They are retrieved when the user clicks on the particualar page. In order to update records on the different pages without going into them you should create separate Ajax request and send to the server information that all items should be checked/unchecked (this is not related to the Grid at all). Proceed the same way as the master checkbox is somewhere else on the page and you want to change all the records when the checkbox is checked.

Regarding the persistence while paging, I already explained that changes are not saved to the server because changes are made only on the client side (no saving request is performed). Consider enabling the AutoSync option of the dataSource to send the changes immediately to the server.

Kind Regards,
Petur Subev
Telerik

 

 

[Laksh]

Hi Michael, have you ever found the solution for this issue?

[Vladimir Iliev]

Hello Laksh,

My colleague Peter already explained what would be the solution in current case if the "ServerOperation" option of the DataSource is set to true - creating separate Ajax request to get the IDs of the rows on other pages. If the "ServerOperation" option of the DataSource is set to false than you can access the records from other pages by calling the "data" method of the DataSource on the client side. 

Regards,
Vladimir Iliev
Telerik

[Michael]

no, the user has to go to each page and select the checkbox in the header and then I store the checkbox on the databound event

function dataBoundGird(e) {

$('#grid :checkbox').each(function () {
//set checked based on if current checkbox's value is in checkedArray.
$(this).attr('checked', jQuery.inArray($(this).val(), checkedArray) > -1);
});

 

}