Infragistics(R) NetAdvantage(R) jQuery
Selecting and Deselecting Rows and Cells Programmatically in igHierarchicalGrid
E-mail your feedback on this topic.

Glossary Item Box

Purpose

This topic explains how to use the API for selecting and deselecting rows and cells in igHierarchicalGrid.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic

Purpose

This topic explains igGrid Selection feature.


In this topic


Control Configuration Summary

Control configuration overview

The following table lists the configurable aspects of the igHierarchicalGrid control.

Configurable aspects

Methods

Cell selection

Row selection

Clear selection



Methods Reference

Introduction

Selection functionality in igHierarchicalGrid has some differences compared to its counterpart in igGrid. To select cells using the API you first need to get a reference of the child grid of your choice and then call the appropriate method. Grids in igHierarchicalGrid are instances of igGrid so you can use all the properties and methods of igGrid.

Note: When a multiple selection is enabled using select methods does not deselect previous selection. You should call the methods multiple times in order to create a multiple selection.
This is also valid for deselect methods.

Method reference summary

The following table summarizes the purpose and functionality of the igHierarchicalGrid selection methods.

Method

Description

selectCell

Select single cell.

selectRow

Select single row.

deselectCell

Deselect single cell.

deselectRow

Deselect single row.

clearSelection

Clear the selection of the grid.

clearSelectionAll

Clear the selection of all the grids in the hierarchy.

clearSelectionAllChildren

Clear the selection of the child grids of the grid recursively.

clearSelectionAllOthers

Clear the selection of all the grids in the hierarchy excluding the current one.



Code Examples

Overview

The following table lists the code examples included in this topic.

Example

Description

Code Example: Selecting a Cell in a Child Grid

Shows how to select a cell in a child grid by foreign key relation.

Code Example: Selecting All Rows in All Expanded Children Grids

Shows how to select all rows of all expanded children.

Code Example: Deselecting a Cell in a Child Grid

Shows how to deselect a cell in a child grid by foreign key relation.

Code Example: Clearing a Selection of All Children Grids

Shows how to clear the selection of all the children grids.



Code Example: Selecting a Cell in a Child Grid

Description

This example shows how to select a cell in a child grid by foreign key relation.

The productId parameter denotes the foreign key relation. It is assumed that Product Id column is the second column in the top level of the hierarchy. The rowIndex and colIndex parameters define the cell in the sub grid which will be selected. The function expands the child grid so that the selection is visible.

Code

In Javascript:

        function selectCellByProductId(productId, rowIndex, colIndex) {
            // get the parent grid
            var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
            // get all rows of the parent grid
            var parentGridAllRows = parentGrid.allRows();
            $(parentGridAllRows).each(function (index, row) {
                // get the value of the product id column
                // it is assumed that product id column is the second column
                productIdCellVal = $(row.cells[1]).html();
                // check to see if this is the searched product id
                if (productIdCellVal === productId.toString())
                    // ... and expand it if it is
                    $("#grid1").igHierarchicalGrid("expand", row);
            });
            // get all expanded child grids
            var childGrids = $("#grid1").igHierarchicalGrid("allChildren");
            // select the cell by row and column indexes
            $(childGrids).each(function(index, grid) {
                $(grid).igGridSelection("selectCell", parseInt(rowIndex), parseInt(colIndex));
            });
        }

Code Example: Selecting All Rows in All Expanded Children Grids

Description

This example shows how to select all rows of all expanded children.

Note: A multiple selection must be enabled.

Code

In Javascript:

        function selectAllRowsOfExpandedChildren() {
            // get all expanded child grids recursively
            var childGrids = $("#grid1").igHierarchicalGrid("allChildren");
            $(childGrids).each(function (index, grid) {
                // get all rows of the child grid
                var allRows = $(grid).igGrid("allRows");
                $(allRows).each(function (index, row) {
                    // select each row
                    $(grid).igGridSelection("selectRow", index);
                });
            });
        }

Code Example: Deselecting a Cell in a Child Grid

Description

This example shows how to deselect cell in child grid by foreign key relation.

Note: A multiple selection must be enabled.

The productId parameter denotes the foreign key relation. It is assumed that Product Id column is the second column in the top level of the hierarchy. The rowIndex and colIndex parameters define the cell in the sub grid which will be selected. Top level grid rows are searched for productId. If there is a match then the data-id attribute is extracted from the row. The child grid ID attribute is assembled and deselectCell method is executed on the grid with the assembled ID.

Code

In Javascript:

        function deselectCellByProductId(productId, rowIndex, colIndex) {
            var data_id;
            // get the parent grid
            var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
            // get all rows of the parent grid
            var parentGridAllRows = parentGrid.allRows();
            $(parentGridAllRows).each(function (index, row) {
                // get the value of the product id column
                // it is assumed that product id column is the second column
                productIdCellVal = $(row.cells[1]).html();
                // check to see if this is the searched product id
                if (productIdCellVal === productId.toString()) {
                    data_id = $(row).attr("data-id");
                }
            });
            // get the child layout key
            var childLayoutKey = $("#grid1").igHierarchicalGrid("option", "columnLayouts")[0].key;
            // define the search id of the child grid
            var childGridId = "#grid1_" + data_id + "_" + childLayoutKey + "_child";
            // deselecting the cell
            $(childGridId).igGridSelection("deselectCell", parseInt(rowIndex), parseInt(colIndex));
        }

Code Example: Clearing a Selection of All Children Grids

Description

This example shows how to clear the selection of second level children grids recursively.

The example below iterates all the rows of the top level grid and checks if the row is expanded. On the expanded rows it calls clearSelectionAllChildren method. Top level grid selection and first level expanded grid selection is not affected.

Code

In Javascript:

        function clearSelectionOfSecondLevelChildrenRecursively() {
            var expanded;
            // get the parent grid
            var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
            // get all rows of the parent grid
            var parentGridAllRows = parentGrid.allRows();
            $(parentGridAllRows).each(function (index, row) {
                expanded = $("#grid1").igHierarchicalGrid("expanded", row);
                // check to see if the row is expanded
                if (expanded)
                    // ... and clear its child grids selection recursively
                    $(row).igGridSelection("clearSelectionAllChildren", false, true);
            });
        }

Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

This topic demonstrates APIs related to igHierarchicalGrid navigation.

This topic demonstrates how to use selection in combination with row selectors.


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

This sample demonstrates configuration of row selection in igHierarchicalGrid.

This sample demonstrates configuration of cell selection in igHierarchicalGrid.

This sample demonstrates configuration of selection feature of igHierarchicalGrid using various properties. You can see which events are fired by the selection.