Header Checkbox Looses Functionality

4 posts, 0 answers
  1. Michael
    Michael avatar
    2 posts
    Member since:
    Apr 2014

    Posted 06 Aug 2018 Link to this post

    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.

  2. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 07 Aug 2018 Link to this post

    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.
  3. Michael
    Michael avatar
    2 posts
    Member since:
    Apr 2014

    Posted 08 Aug 2018 Link to this post

    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?

     

  4. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 09 Aug 2018 Link to this post

    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.
Back to Top