Select all within grouping

[Christine]

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!

[Stefan]

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

[Christine]

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

 

 

[Christine]

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

[Stefan]

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

[Christine]

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

 

 

[Christine]

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

[Stefan]

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

[Christine]

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

Chris

[Christine]

Terrific! That worked for me!

Thanks so much!