Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
Adding Group Selector(checkbox) for each parent in IgGrid Table
posted

Hi there! 
Features used: IgGridgroupby with rowSelectors
How to add Group selector/checkboxes for each parent?
For example,
in screenshot below, Name and UPC should have checkboxes along with child '3 Musketeers'
Name and UPC should act as Parent Checkboxes.
If Name is checked UPC (sub parent) and child '3 Musketeers' should be checked.
If '3 Musketeers' (child/children) is checked Name (Parent) UPC (sub parent) should be checked.

Parents
No Data
Reply
  • 660
    Offline posted

    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

Children
No Data