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

Header Checkbox Looses Functionality

3 Answers 112 Views
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 06 Aug 2018, 07:28 PM

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

Sort by
0
Preslav
Telerik team
answered on 07 Aug 2018, 10:11 AM
Hi Michael,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Michael
Top achievements
Rank 1
answered on 08 Aug 2018, 01:11 PM

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?

 

0
Preslav
Telerik team
answered on 09 Aug 2018, 07:24 AM
Hello Michael,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Michael
Top achievements
Rank 1
Share this question
or