Select all within grouping

10 posts, 2 answers
  1. Christine
    Christine avatar
    8 posts
    Member since:
    Nov 2017

    Posted 23 Oct 2018 Link to this post

    Hi,

    I have a grid with selectable set to 'multiple, row' and I have grouping turned on. The request from our design team was to have a "Select All" checkbox that is beneath each grouping. Is that possible? We certainly have the select all checkbox for the entire grid, but they want them on an individual grouping basis.

    Let me know if you need more detail or code sample.

    Thank you!

  2. Answer
    Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 24 Oct 2018 Link to this post

    Hello, Christine,

    The desired result can be achieved by using the groupHeaderTemplate for each column and setting a checkbox in the template. Then on the dataBound event to attach an event listener to the checkbox and to select or deselect the row based on the checkbox value:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.groupheadertemplate

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/select

    I also made an example demonstrating this(only for the ProductName column):

    https://stackblitz.com/edit/react-xcvvhq?file=app/main.js

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Christine
    Christine avatar
    8 posts
    Member since:
    Nov 2017

    Posted 05 Nov 2018 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks so much. This has been very helpful. I am having two issues, however, I can set clear the checkboxes on unselect (I added code for that), but once I remove the grouping, the checkboxes appear to be selected. Am I missing the removal of a certain attribute? 

    This is my code:

    $(".select-group").on("click", function (event) {
    if (event.target.checked) {
    var grid = e.sender
    var currentGroupRow = $(this).closest(".k-grouping-row");
    // Select the items in the current group
    grid.select(currentGroupRow.nextUntil(".k-grouping-row", ":not('.k-group-footer')"))
    } else {
    var currentGroupRow = $(this).closest(".k-grouping-row");
    let tr = currentGroupRow.nextUntil(".k-grouping-row", ":not('.k-group-footer')")
    $(tr).each(function(e) {
    $(this).removeClass("k-state-selected");
    var td = $(this).children(0).children(0);
    var checked=$(td).closest('input') ;
    checked[0].checked = false;
    checked.attr("aria-checked", false);
    checked.removeAttr("aria-checked");
    })
    }
    });

    The other issue I'm having is that if they do nested groupings, they want to click on the top level and have all the groupings below selected. I was trying to go down a level to see the next closest .k-grouping-row, but even finding that as a hardcoded item isn't coming across.

    Thanks!

    Chris

     

     

  4. Christine
    Christine avatar
    8 posts
    Member since:
    Nov 2017

    Posted 05 Nov 2018 in reply to Christine Link to this post

    I should add that the last line of code was in there in error - it did not work (checked.removeAttr("aria-checked"))
  5. Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 06 Nov 2018 Link to this post

    Hello, Christine,

    I`m glad to hear that there is a progress on the task.

    Regarding to the issues:

    1)  I can set clear the checkboxes on unselect (I added code for that), but once I remove the grouping, the checkboxes appear to be selected. Am I missing the removal of a certain attribute?  - I made a video using the provided example and after I remove the grouping the items are not selected. Is the scenario different?

    https://www.screencast.com/t/ZYK11aIsq

    2) The other issue I'm having is that if they do nested groupings, they want to click on the top level and have all the groupings below selected. I was trying to go down a level to see the next closest .k-grouping-row, but even finding that as a hardcoded item isn't coming across. - Yes, this will require an additional logic to drill down the row to find the needed one.

    This is one possible approach:

    https://stackblitz.com/edit/react-xcvvhq?file=app/main.js

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Christine
    Christine avatar
    8 posts
    Member since:
    Nov 2017

    Posted 06 Nov 2018 in reply to Stefan Link to this post

    Hi Stefan,

    I watched the video. I think what you're missing is that my select all checkbox controls a checkbox column corresponding with my rows - not just a selectable row. So the code in my last example actually sets the checkboxes to empty when unchecking the select all on the grouping. This is my code to uncheck:

    var currentGroupRow = $(this).closest(".k-grouping-row");
    let tr = currentGroupRow.nextUntil(".k-grouping-row", ":not('.k-group-footer')")
    $(tr).each(function(e) {
    $(this).removeClass("k-state-selected");
    var td = $(this).children(0).children(0);
    var checked=$(td).closest('input') ;
    checked[0].checked = false;
    checked.attr("aria-checked", false);
    /* checked[0].removeAttribute("checked");
    checked[0].removeAttribute("aria-checked"); */
    /* checked.removeAttr("aria-checked");

    })

    It looks good while I still have the grouping. It's when I remove the grouping that all the checkbox items that appeared unchecked before go back to a checked state. I do have one option available if you could help... how do I grab on  to the ungrouping event and do a grid.clearSelection?? That would actually take care of it.

    Thanks again,

    Chris

     

     

  7. Christine
    Christine avatar
    8 posts
    Member since:
    Nov 2017

    Posted 06 Nov 2018 in reply to Christine Link to this post

    Hi again Stefan,

    Just wanted to let you know that I grabbed the actual grouping on the dataBound and if I found the group length set to 0, I just did a clearSelection(). That solved my issue.

    I am still having an issue with getting all nested groupings to set the checkbox if checking the top checkbox - it only seems to set it for the first group (and then I can't check it on the nested group). I would like to propose a different solution if you could help me out - I would like to lock down the top level of the checkbox so that the user is forced to only check the box on the nested grouping. Let me know if you need more details on what I'm asking.

     

    Thanks as always for your help!

    Chris

  8. Answer
    Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 07 Nov 2018 Link to this post

    Hello, Christine,

     I would like to lock down the top level of the checkbox so that the user is forced to only check the box on the nested grouping - Based on this I can assume that the desired result is to disable the checkboxes that are not on the last level of grouping. If this is correct, I can suggest on the dataBound event to loop through all of the checkboxes, and the once that have a grouping row as next tr to receive an attribute disabled:

    $('.k-grouping-row').each(function (e) {
      if($(this).next('tr').hasClass('k-grouping-row')){
        let input = $(this).find('.select-group')
        $(input).attr("disabled", true)
      }
    })






    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Christine
    Christine avatar
    8 posts
    Member since:
    Nov 2017

    Posted 07 Nov 2018 in reply to Stefan Link to this post

    Terrific!! That solved my problem... thanks so much!

    Chris

  10. Christine
    Christine avatar
    8 posts
    Member since:
    Nov 2017

    Posted 07 Nov 2018 in reply to Stefan Link to this post

    Terrific! That worked for me!

    Thanks so much!

Back to Top