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
360
Selection in igHierarchicalGrid on multiple level
posted

Hello,

I'm currently embedding the igHierarchialGrid in our product for several grids, and in some of them the main grid has the same entities as child grids has. For example, a grid that shows the impact of a server if it's down on other computers:

 Server 1

          => Computer 1

          => Computer 2

 Server 2

          => Computer 21

          => Computer 22

.....

server X and computer XX are ruled with the same controller. Here is my problem I'm using the selection and rowselection feature but it seems to work only on one grid main or child. But in the scenario, both are dealing with the same entities and I’d like to keep the selection in child and main grids. Is there a way to do that? because I can't find any info on that part in the documentation.

Thanks.

  • 1320
    Offline posted

    Hello,

    After investigating this further, I have determined that by design the selection in igHierarchicalGrid is enabled only per level. Selection could be performed either in parent or child grid, however not at both simultaneously.

    What I could suggest as a workaround is disabling the Selection feature and setting a template column with checkbox for the parent and the child rows. On click of the checkbox, a class is set to the row, the checkbox is toggled and the row is “selected”. The selected rows are saved in an array selectedRows.

    columns: [

        { key: "checkbox", headerText: "", width: "40px", template: "<input type='checkbox' onclick='checkChildRow(event, ${ID})'/>" },

    . . .

    function checkChildRow(evt, id) {

                toggleRow(evt.target, id);

            }

    function toggleRow(input, id) {

                if (input.checked) {

                    selectedRows.push(id)

                    input.parentNode.parentNode.classList.add("selectedClass")

                }

                else {

                    selectedRows = selectedRows.filter(elem => elem !== id);

                    input.parentNode.parentNode.classList.remove("selectedClass")

                }

            }

    Below I am attaching a sample, demonstrating the described behavior.

    Please keep in mind that this is a custom approach, which could introduce unexpected behavior in some scenarios.

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

    Regards,
    Monika Kirkova,
    Infragistics

    igHierarchicalGridSelectionView.zip