Hello Rashmi,

Thank you for posting in our community!

I have been looking into your question and what I can say is that templating a checkbox (or any other element) inside the grouped by area is currently not supported.

Having this in mind, what I would suggest is adding a click handler for the grouped by td element, getting the element's text, and subtracting the column’s key and value, for example:

Ship Country: Argentina (3)

would be key = ShipCountry and value = Argentina.

With this information, you can determine the rows that are in the clicked group and use the selectRowById or deselectRowById method depending on the selected state of the row.

This could look similar to the following:

$("#grid").on("click", "td[data-gbsummary='true']", function () {

    const column = $(this).text().split(":")[0];
    let value = $(this).text().split(":")[1].trim();
    const bracketIndex = value.indexOf("(");
    value = value.substring(0, bracketIndex - 1);
    const columnKey = $("#grid").igGrid("columnByText", column).key;

    const ds = $("#grid").igGrid("option", "dataSource");
    const rowsInGroup = ds.filter((x) => x[columnKey] === value);
    const primaryKey = $("#grid").igGrid("option", "primaryKey");
    const selectedRows = $("#grid").igGridSelection("selectedRows");

    rowsInGroup.forEach((row) => {
        const isSelected = selectedRows.some(
            (x) => x.id === row[primaryKey]
        );

        if (isSelected) {
            $("#grid").igGridSelection("deselectRowById", row[primaryKey]);
        } else {
            $("#grid").igGridSelection("selectRowById", row[primaryKey]);
        }
    });
});

Additionally, in order for this configuration to work as expected, a unique primary key should be set.

Please test it on your side and let me know if you need any further assistance regarding this matter.

Sincerely,
Riva Ivanova
Software Developer