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

Glossary Item Box

Purpose

This topic explains how to use the API for expanding and collapsing child grids in igHierarchicalGrid.

Required background

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

Topic

Purpose

This topic provides conceptual information about the igHierarchicalGrid including information regarding features, binding to data sources, requirements, templates, and interaction.

This topic demonstrates how to initialize the igHierarchicalGrid in both jQuery and MVC.


In this topic


Control Configuration Summary

Control configuration overview

The following table lists the configurable aspects of the igHierarchicalGrid control related to expanding and collapsing rows.

Configurable aspects

Methods

Expanding rows

Collapsing rows

Toggle rows



Methods Reference

Introduction

This section explains the methods related to expanding and collapsing API.

Method reference summary

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

Method

Description

expand

Expands row.

collapse

Collapses row.

expanded

Checks if the row is expanded.

collapsed

Checks if the row is collapsed.

toggle

Toggles row.



Code Examples

Overview

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

Example

Description

Code Example: Expanding All Rows on a Parent Grid

Shows how to expand all rows of the root grid.

Code Example: Collapsing All Rows on a Parent Grid

Shows how to collapse all rows of the root grid.

Code Example: Toggling the Current Selected Row

Shows how to toggle the current selected row of the root grid.



Code Example: Expanding All Rows on a Parent Grid

Description

This example shows how to expand all rows of the root grid. In the example below the following functions are defined:

  • expandAllRowsOfGrid – this function expands all rows of the grid which is passed to it. The function can be used on any level of the hierarchy.
  • expandAllRowsOfRootGrid – this function expands all rows of the root grid. The function gets the reference to top level grid and then passes it to expandAllRowsOfGrid.

Code

In Javascript:

        function expandAllRowsOfGrid(grid) {
            // expand each row in grid
            $(grid.allRows()).each(function (index, element) {
                $("#grid1").igHierarchicalGrid("expand", element); 
            });
        }        
        
        function expandAllRowsOfRootGrid() {
            // get the top level grid
            var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
            expandAllRowsOfGrid(parentGrid);
        }

Code Example: Collapsing All Rows on a Parent Grid

Description

This example shows how to collapse all rows of the root grid. In the example below the following functions are defined:

  • collapseAllRowsOfGrid – this function collapses all rows of the grid which is passed to it. This function can be used on any level of the hierarchy.
  • collapseAllRowsOfRootGrid – this function collapses all rows of the root grid. The function gets the reference to top level grid and then passes it to collapseAllRowsOfGrid.

Code

In Javascript:

        function collapseAllRowsOfGrid(grid) {
            // collapse each row
            $(grid.allRows()).each(function (index, element) {
                $("#grid1").igHierarchicalGrid("collapse", element); 
            });        
        }
        
        function collapseAllRowsOfRootGrid() {
            // get the top level grid
            var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
            collapseAllRowsOfGrid(parentGrid);
        }

Code Example: Toggling the Current Selected Row

Description

This example shows how to toggle the current selected row of the root grid. In the example below the following functions are defined:

  • toggleCurrentRowOfGrid – this function toggles current row of the grid which is passed to it. The function can be used on any level of the hierarchy.
  • toggleCurrentRowOfRootGrid – this function toggles current row of the root grid. The function gets the reference to top level grid and then passes it to toggleCurrentRowOfGrid.
Note: For this example to work the Selection feature must be enabled.

Code

In Javascript:

        function toggleCurrentRowOfGrid(grid) {
            // get reference to current selected row
            var row = $(grid).igGridSelection("selectedRow");
            if (row) {
                // toggle row
                $("#grid1").igHierarchicalGrid("toggle", row.element);
            }
        }
        
        function toggleCurrentRowOfRootGrid(grid) {
            // get the top level grid
            var parentGrid = $("#grid1").igHierarchicalGrid("root");
            toggleCurrentRowOfGrid(parentGrid);
        }

Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

This topic explains the events that are specific to the igHierarchicalGrid.

This topic demonstrates how to define columns and layouts in the igHierarchicalGrid including through auto-generation.


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

This sample demonstrates usage of expanding and collapsing API of igHierarchicalGrid.