I've been following the demo's provided on the Kendo site and attempting to add several features into a grid: The selectable feature to allow click-drag selection of multiple rows, and a "Select All" checkbox in the header that will select all checkboxes for all available rows.
Unfortunately, I have not been able to get them both to work at the same time. Please see the Dojo I've modified: Here
Notice that the "select all" checkbox works correctly on page load - but when a feature of the grid is interacted with (such as the sort feature), the checkbox will stop working. Here's the interesting thing, if another feature is clicked (another sort - even if not the same row), the checkbox will function correctly again.
It "feels" as though something is being enabled/disabled that allows the checkbox to be selected.
3 Answers, 1 is accepted
I examined the provided Dojo, and it seems that the "select all" checkbox is not working even when the page loads. Please correct me if I am wrong.
Further, I believe I was able to achieve the desired results after using the "Select or Deselect All Rows with Select All Header Checkbox" how-to as a base, and adding the following code to the Grid definition:
sortable: true,selectable:"multiple, row",change: function(e) { $('tr').find('[type=checkbox]').prop('checked', false); $('tr.k-state-selected').find('[type=checkbox]').prop('checked', true);},Now it looks like:
Regards,
Preslav
Progress Telerik
Rank 1
Thank you for that - your solution worked. I must have missed something, or not correctly made a change the first few times I did it, but after following your demo (and building the code in the direction you suggested) it works as expected.
There is an additional, but linked, issue.
Our grid gives the user the ability to save their grid.options to the database, and then call them back upon request. When any grid data is loaded, the select all header checkbox functionality stops. It checks itself, as expected, but does not select any (or all) of the rows in the grid. Here's a look at how we make and get the options:
function saveUserGridOptions(options) { var paramdata = { reportId: pageId, options: JSON.stringify(options) }; $.ajax({ url: getPathToRoot() + "CommonSubReports/SaveGridOptions", type: 'POST', contentType: 'application/json; charset=utf-8', dataType: "json", data: JSON.stringify({ reportId: paramdata.reportId, options: paramdata.options }), complete: function (data) { if (data.responseJSON.IsSuccess == true) { ShowNotification(data.responseJSON.Message, NotificationTemplate.Success); } else { ShowNotification(data.responseJSON.Message, NotificationTemplate.Error); } }, error: function (jqXHR, textStatus, errorThrown) { ShowNotification(errorThrown, NotificationTemplate.Error); } });}function getSavedGridOptions(grid) { var paramdata = { reportId: pageId }; $.hideWait(); $.ajax({ url: getPathToRoot() + "CommonSubReports/LoadGridOptions", type: 'GET', contentType: 'application/json; charset=utf-8', dataType: 'json', data: paramdata, complete: function (data) { $.hideWait(); if (data.responseJSON.IsSuccess == true) { sendGridSavedOptions(data.responseJSON.Message, grid); ShowNotification("Your grid options were successfully loaded", NotificationTemplate.Success); } else { ShowNotification(data.responseJSON.Message, NotificationTemplate.Error); } }, error: function (jqXHR, textStatus, errorThrown) { ShowNotification(errorThrown, NotificationTemplate.Error); } });}function sendGridSavedOptions(_options, grid) { var loaded_state = JSON.parse(_options); if (loaded_state) { var options = grid.options; grid.setOptions({ columns: loaded_state.columns }); }}
The options save and load correctly - what might be causing the header checkbox to lose functionality?
The event handlers of the master checkbox are not part of the options of the Grid. Having said that, after recreating the Grid with the setOptions method, manually reattach the change event handler of the master checkbox.
Regards,
Preslav
Progress Telerik