Select all within grouping from all pages

[Swapnil]

https://www.telerik.com/forums/select-all-within-grouping  , reference to this
Hi Team ,
I am implementing the same functionality in Kendo Grid using j Query in a Razor page. I have successfully implemented nested grouping, and it works well for selecting all records with a matching group header. The issue arises when the filtered data spans multiple pages. It works fine when the data is on the same page, but when it extends to the second page, the selection doesn't include records from that page.

I am currently using `grid.dataSource.flatView()` to obtain the data. However, it seems that this method only provides data from the current page. I need a solution to retrieve data from all pages, considering that the grouping alters the page views.

Thanks,
Swapnil

[Nikolay]

Hi Swapnil,

There is no method that will return the group items from the same group on all pages. However, I can suggest selecting items when paging is performed and the first group continues from the previous page.

Here is an sample logic for this:

            dataBound: function() {
              var grid = $("#grid").data("kendoGrid");

              $(".checkbox").on("click", function (e) {
                // Select the items in the current group in the current page
                var currentGroupRow = $(this).closest(".k-grouping-row");
                currentGroupRowValue = currentGroupRow.find(".value").text();
                grid.select(currentGroupRow.nextUntil(".k-grouping-row", ":not('.k-group-footer')"));

              });

              if(currentGroupRowValue.length !== 0) {
                // select items in the new page if the group is continuing from prev page
                currentGroupRow = $(".k-grouping-row").first();
                var newPageValue = currentGroupRow.find(".value").text();
                if(currentGroupRowValue === newPageValue) { 
                  grid.select(currentGroupRow.nextUntil(".k-grouping-row", ":not('.k-group-footer')"));
                
                }
              }
            }

Dojo demo: https://dojo.telerik.com/iwObuRAD

Please let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Swapnil]

Hi Nikolay, I have tried this; it works when grouping is based on a single column. However, as soon as I add another column in grouping, it does not select rows. Additionally, I want to deselect rows when the checkbox is unchecked. Thanks,Swapnil

[Swapnil]

    //Add checkbox on group header to select all records matching group header
    grid.table.find(".k-grouping-row").each(function () {

    var groupRow = $(this);
    var checkbox = $("<input  type='checkbox' class='k-select-checkbox k-checkbox k-checkbox-md k-rounded-md group-checkbox' style='margin-left:5px;'/>");
        var targetTd = groupRow.find("td.k-table-td");
        var checkboxSpan = $("<span>").append(checkbox);
    
        targetTd.append(checkboxSpan);

    });

    //if  another grouping column  is add in then remove checkbox from firsr group row and add checkbox for second row  
grid.table.find(".k-grouping-row").each(function () {
    var currentRow = $(this);


    if (currentRow.next('tr').hasClass('k-grouping-row')) {
    
        let input = currentRow.find('.group-checkbox');
        input.attr("disabled", true);
   
        input.css("display", "none");
        // make if  $(input).is(":checked")  then  currentRow.next('tr')  hasClass('k-grouping-row') input type checkbox is checked
    
        if (input.is(":checked")) {
            // If checked, check the checkbox in the next row if it has the class 'k-grouping-row'
            var nextRowCheckbox = currentRow.next('tr').find('.group-checkbox');
            if (nextRowCheckbox.length > 0) {
                nextRowCheckbox.prop("checked", true);
            }
        }
    }
});

var groupHeader = JSON.parse(localStorage.getItem("groupheaderChecked")) || [];

// format of groupheader { header: value, checked: isChecked };

if (groupHeader != null) {

    var groupingRow = [];

    groupHeader.forEach(function (header) {

    
        var groupingRow = $("tr.k-grouping-row").filter(function () {
            return $(this).text().trim() == header.header;
        })

    
        groupingRow.find("input[type='checkbox']").prop("checked", header.checked);
    });

}

I would greatly appreciate it if you could review the code and provide any suggestions or corrections. I'm specifically looking for feedback on the implementation and whether there are any best practices I might be missing.

Thank you so much in advance for your time and assistance.

Best regards, Swapnil

[Nikolay]

Hi Swapnil,

Is it possible to apply the changes to the Dojo and share it with me so I can advise further?

Regards,

Nikolay