ui.igHierarchicalGrid

ui.igHierarchicalGrid_image

The igHierarchicalGrid control is a hierarchical jQuery Grid control that features filtering, group by, column hiding, paging, column resizing, row selectors, cell selection, sorting, column summaries, tooltips, and updating functionality. For more information on each of these features, see their corresponding API document: igGridFiltering, igGridGroupBy, igGridHiding, igGridResizing, igGridPaging, igGridRowSelectors, igGridSelection, igGridSorting, igGridSummaries, igGridTooltips, igGridUpating. The igHierarchicalGrid control is built on top of the stand-alone flat-data igGrid control. The API for the igGrid control serves as the base for configuring the igHierarchicalGrid control and its columnLayouts settings. See the igGrid control API document for more details.

The following code snippet demonstrates how to initialize the igHierarchicalGrid control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igHierarchicalGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

 		
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
	  <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        var jsonData = { "d": [
            {
                "ID": 0,
                "Name": "Food",
                "Category": { "ID": 0, "Name": "Food", "Active": true, "Date": "\/Date(1059660800000)\/" },
                "Products": [
                    { "ID": 0, "Name": "Bread", "Price": "2.5" }
                ]
            },
            {
                "ID": 1,
                "Name": "Beverages",
                "Category": { "ID": 2, "Name": "Beverages", "Active": true, "Date": "\/Date(1159660800000)\/" },
                "Products": [
                    { "ID": 1, "Name": "Milk", "Price": "3.5" },
                    { "ID": 2, "Name": "Vint soda", "Price": "20.9" }
                ]
            },
            {
                "ID": 2,
                "Name": "Electronics",
                "Category": { "ID": 5, "Name": "Electronics", "Active": false, "Date": "\/Date(1859660800000)\/" },
                "Products": [
                    { "ID": 7, "Name": "DVD Player", "Price": "35.88" },
                    { "ID": 8, "Name": "LCD HDTV", "Price": "1088.8" }
                ]
            }
        ]}

        $("#hierarchicalGrid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: jsonData,
            dataSourceType: "json",
            responseDataKey: "d",

            autoGenerateColumns: false,
            primaryKey: "ID",
            columns: [
			    { headerText: "ID", key: "ID", width: "50px", dataType: "number" },
			    { headerText: "Name", key: "Name", width: "130px", dataType: "string" }
		    ],
            autoGenerateLayouts: false,
            columnLayouts: [
		    {
			    key: "Products",
			    responseDataKey: "",
			    childrenDataProperty: "Products",
			    autoGenerateColumns: false,
			    primaryKey: "ID",
			    columns: [
				    { key: "ID", headerText: "ID", width: "25px" },
				    { key: "Name", headerText: "Product Name", width: "90px" },
				    { key: "Price", headerText: "Price", dataType: "number", width: "55px" }
			    ]
		    }
	    ]
        });
    });
    </script>
</head>
<body>
<table id="hierarchicalGrid"></table>
</body>

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.util.js
infragistics.ui.grid.framework.js

Inherits

  • animationDuration

    Type:
    number
    Default:
    500

    The row expanding/collapsing animation duration in ms.

    Code Sample

      
        //Initialize
        $(".selector").igHierarchicalGrid({
            animationDuration: 1000
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "animationDuration");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "animationDuration", 1000);
        $(".selector").igHierarchicalGrid("dataBind");

  • autoGenerateLayouts

    Type:
    bool
    Default:
    false

    If true, will autogenerate all layouts assuming default values for "childrenDataProperty"
    When autoGenerateLayouts is enabled, it will automatically generate all columns recursively. (all columns on all levels).

    Code Sample

             
       //Initialize
        $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: true
        });
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "autoGenerateLayouts");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "autoGenerateLayouts", true);

  • collapseTooltip

    Type:
    string
    Default:
    ""

    Specifies the default tooltip applied to an expand column cell, that is currently expanded.

    Code Sample

     
        //Initialize
        $(".selector").igHierarchicalGrid({
            collapseTooltip: "Custom Collapse Tooltip Text"
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "collapseTooltip");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "collapseTooltip", "Custom Collapse Tooltip Text");

  • columnLayouts

    Type:
    array
    Default:
    []
    Elements Type:
    object

    List of columnLayout objects that specify the structure of the child grids. All options that are applicable to a flat grid are also applicable here.

    Code Sample

       
          //Initialize
          $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: false,
			columnLayouts: [
				{
					key: "Products",
					primaryKey: "ProductID",
					foreignKey: "CategoryID",
                    responseDataKey: "d.results",
					autoGenerateColumns: true
				}
			]
            });

    • foreignKey

      Type:
      string
      Default:
      null

      Specifies the foreignKey of the columnLayout. This is also the column key of the parent grid.

      Code Sample

       
            //Initialize
            $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: false,
			columnLayouts: [
				{
					foreignKey: "CategoryID"
				}
			]
            });

    • key

      Type:
      string
      Default:
      null

      Specifies the columnLayout key. This is the property that holds the data records for the current column layout.

      Code Sample

       
            $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: false,
			columnLayouts: [
				{
					key: "Products"
				}
			]
            });

    • primaryKey

      Type:
      string
      Default:
      null

      Specifies the primaryKey of the columnLayout. This also serves as the column key for the current column layout.

      Code Sample

       
            //Initialize
            $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: false,
			columnLayouts: [
				{
					primaryKey: "ProductID"
				}
			]
            });

  • columns

    Type:
    array
    Default:
    []
    Elements Type:
    object

    An array of column objects.

    Code Sample

                 
            //Initialize
            $(".selector").igHierarchicalGrid({
            autoGenerateColumns: false,
			columns: [
				{ key: "CategoryID", headerText: "Category ID", dataType: "number" },
				{ key: "CategoryName", headerText: "Category Name", dataType: "string" },
				{ key: "Description", headerText: "Description", dataType: "string" }
			]
            });

  • defaultChildrenDataProperty

    Type:
    string
    Default:
    "children"

    Specifies the default property in the response where children will be located.

    Code Sample

                
            //Initialize
            $(".selector").igHierarchicalGrid({
			    defaultChildrenDataProperty: "childLayout"
            });  
            
            //Get
            var accessibility = $(".selector").igHierarchicalGrid("option", "defaultChildrenDataProperty");
        
            //Set
            $(".selector").igHierarchicalGrid("option", "defaultChildrenDataProperty", "childLayout");

  • expandCollapseAnimations

    Type:
    bool
    Default:
    true

    Applies a linear animation - either expanding or collapsing depending on the parent row state.

    Code Sample

             
        //Initialize
        $(".selector").igHierarchicalGrid({
            expandCollapseAnimations: true
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "expandCollapseAnimations");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "expandCollapseAnimations", true);

  • expandColWidth

    Type:
    number
    Default:
    30

    Specifies the expand column width.

    Code Sample

             
       //Initialize
        $(".selector").igHierarchicalGrid({
            expandColWidth: 50
        });

  • expandTooltip

    Type:
    string
    Default:
    ""

    Specifies the default tooltip applied to an expand column cell, that is currently collapsed.

    Code Sample

             
        //Initialize
        $(".selector").igHierarchicalGrid({
            expandTooltip: "Custom expnad tooltip text"
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "expandTooltip");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "expandTooltip", "Custom expnad tooltip text");
        $(".selector").igHierarchicalGrid("dataBind");

  • initialDataBindDepth

    Type:
    number
    Default:
    -1

    Only the first level will be data-bound initially. Also serves as "render" depth, meaning that depending on this prop, the grid will.

    Code Sample

             
        //Initialize
        $(".selector").igHierarchicalGrid({
            initialDataBindDepth: 1
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "initialDataBindDepth");

  • initialExpandDepth

    Type:
    number
    Default:
    -1

    No levels will be automatically expanded when the widget is instantiated for the first time.

    Code Sample

             
        //Initialize
        $(".selector").igHierarchicalGrid({
            initialExpandDepth: 1
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "initialExpandDepth");

  • maxDataBindDepth

    Type:
    number
    Default:
    -1

    Specifies the limit on the number of levels to bind to.

    Code Sample

             
        //Initialize
        $(".selector").igHierarchicalGrid({
            maxDataBindDepth: 3
        });  
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "maxDataBindDepth");

  • odata

    Type:
    bool
    Default:
    false

    If true, encodes all requests using OData conventions and the $expand syntax.

    Code Sample

             
        //Initialize
        $(".selector").igHierarchicalGrid({
            odata: true
        });  
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "odata");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "odata", true);

  • pathSeparator

    Type:
    string
    Default:
    "/"

    Specifies the delimiter for constructing paths , for hierarchical lookup of data.

    Code Sample

     
        //Initialize
        $(".selector").igHierarchicalGrid({
            pathSeparator: "/"
        });

  • rest

    Type:
    bool
    Default:
    false

    If true, load on demand will be achieved using REST compliant resource access with appropriate url-s for
    the ajax GET calls.

    Code Sample

     
        //Initialize
        $(".selector").igHierarchicalGrid({
            rest: true
        });
        
        //Get
        var rest = $(".selector").igHierarchicalGrid("option", "rest");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

  • childGridCreated

    Cancellable:
    false

    Event fired after a child grid is created.

    Code Sample

     
          //Bind after initialization
          $(document).delegate(".selector", "igchildgridcreated", function (evt, ui) {

              //the triggered event 
              evt;
                
              //reference to the DOM object on which the event is attached to (the one returned from the $(".selector"))
              evt.target;  
                
              //reference to the DOM object which triggered the event
              evt.currentTarget;  
                
              //type of the event according to the jQuery UI convention: "igchildgridcreated"
              evt.type;
                
              // reference to the created child grid DOM element
              ui.element
                
              //reference to the Hierarchical grid widget
              ui.owner;

          });

  • childGridCreating

    Cancellable:
    true

    Event fired before a child grid is going to be created, allows the developer to override the child grid creation.

    Code Sample

             //Bind after initialization
         $(document).delegate(".selector", "igchildgridcreating", function (evt, ui) {

             //the triggered event 
             evt;

             //reference to the DOM object on which the event is attached to (the one returned from the $(".selector"))
             evt.target;

             //reference to the DOM object which triggered the event
             evt.currentTarget;

             //type of the event according to the jQuery UI convention:	"igchildgridcreating"
             evt.type;

             // reference to the child grid DOM element which is to be created
             ui.element

             // reference to the options of the child grid which is to created
             ui.options

             // reference to the Hierarchical grid widget
             ui.owner;

             // reference to the path to the child grid which is to be created 
             ui.path

         });

  • childGridRendered

    Cancellable:
    false

    Event fired when child grid is rendered
    use args.owner to access the hierarchical grid object
    use args.parentrow to access the row element for the row that's about to be populated
    use args.childgrid to get reference to the child grid.

    Code Sample

     
      $(document).delegate(".selector", "igchildgridrendered", function (evt, ui) {
            //return the triggered event
            evt;
            
            //reference to the hierarchical grid object
            ui.owner;
            
            //reference to the row element for the row that's about to be populated
            ui.parentrow;
            
            //reference to the child grid
            ui.childgrid;
      });

  • childrenPopulated

    Cancellable:
    false

    Event which is fired when children have been populated (Load on demand)
    use args.owner to access the hierarchical grid object
    use args.parentrow to access the row element for the row that was populated
    use args.id to get the data ID of the row.

    Code Sample

       
        //Bind after initialization
	$(document).delegate(".selector","ighierarchicalgridchildrenpopulated", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;           
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;          
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridchildrenpopulated'
            evt.type;
            
            
            //custom row id that is combination from the primaryKey and the id of the row
            ui.id;
            
            //reference to the Hierarchical grid widget
            ui.owner;         
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;          
            //get the HTML DOM row object
            ui.parentrow[0];            
        }); 
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            childrenPopulated : function(e, args) {...}
		});

  • childrenPopulating

    Cancellable:
    true

    Event which is fired when children are about to be populated (Load on demand)
    use args.owner to access the hierarchical grid object
    use args.parentrow to access the row element for the row that's about to be populated
    use args.id to get the data ID of the row.

    Code Sample

            //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridchildrenpopulating", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;      
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridchildrenpopulating'
            evt.type;
            
            
            //custom row id that is combination from the primaryKey and the id of the row
            ui.id;
            
            //reference to the Hierarchical grid widget
            ui.owner;
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;            
            //get the HTML DOM row object
            ui.parentrow[0];  
        });
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            childrenPopulating : function(e, args) {...}
		});

  • rowCollapsed

    Cancellable:
    false

    Event which is fired when a hierarchical row has been collapsed
    use args.owner to access the hierarchical grid object
    use args.parentrow to access the row element for the row that was collapsd.

    Code Sample

                     
        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridrowcollapsed", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;            
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;           
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowcollapsed'
            evt.type;
            
            
            //reference to the Hierarchical grid widget
            ui.owner;            
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;            
            //get the HTML DOM row object
            ui.parentrow[0]; 
        });  
            
        //Initialize
        $(".selector").igHierarchicalGrid({
            rowCollapsed : function(e, args) {...}
		});

  • rowCollapsing

    Cancellable:
    true

    Event which is fired when a hierarchical row is about to be collapsed
    use args.owner to access the hierarchical grid object
    use args.parentrow to access the row element for the row that's about to be collapsed.

    Code Sample

             
        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridrowcollapsing", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;            
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;            
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowcollapsing'
            evt.type;
            
            
            //reference to the Hierarchical grid widget
            ui.owner;            
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;           
            //get the HTML DOM row object
            ui.parentrow[0]; 
        }); 
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            rowCollapsing : function(e, args) {...}
		});

  • rowExpanded

    Cancellable:
    false

    Event which is fired after a hierarchical row has been expanded
    use args.owner to access the hierarchical grid object
    use args.parentrow to access the row element for the row that was expanded.

    Code Sample

     
        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridrowexpanded", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;            
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;           
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowexpanded'
            evt.type;
            
            
            //reference to the Hierarchical grid widget
            ui.owner;            
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;            
            //get the HTML DOM row object
            ui.parentrow[0];
        });
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            rowExpanded : function(e, args) {...}
		});

  • rowExpanding

    Cancellable:
    true

    Event which is fired when a hierarchical row is about to be expanded
    use args.owner to access the hierarchical grid object
    use args.parentrow to access the row element for the row that's about to be expanded.

    Code Sample

            
        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridrowexpanding", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowexpanding'
            evt.type;
            
            
            //reference to the Hierarchical grid widget
            ui.owner;
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;
            //get the HTML DOM row object
            ui.parentrow[0];         
        });  
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            rowExpanding : function(e, args) {...}
		});

  • allChildren

    .igHierarchicalGrid( "allChildren" );
    Return Type:
    object

    Returns a flat list of all child grid elements (recursive).

    Code Sample

     
        var hierarchicalGridChildren = $(".selector").igHierarchicalGrid("allChildren");

  • allChildrenWidgets

    .igHierarchicalGrid( "allChildrenWidgets" );
    Return Type:
    object

    Returns a flat list of all child grid widgets (not elements) - recursive.

    Code Sample

     
        var hierarchicalGridWidgets = $(".selector").igHierarchicalGrid("allChildrenWidgets");

  • collapse

    .igHierarchicalGrid( "collapse", id:domelement, [callback:function] );

    Collapses a parent row
    Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

    • id
    • Type:domelement
    • accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.
    • callback
    • Type:function
    • Optional
    • Specifies a custom function to be called when parent row is expanded(optional). Takes 2 arguments - first is hierarchical grid object, second is the row element that was collapsed.

    Code Sample

     
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0);
        $(".selector").igHierarchicalGrid("collapse", rowDomElement);
        // OR
        $(".selector").igHierarchicalGrid("collapse", rowDomElement, function () {
          // Custom code executed after the collapse operation finishes
        });

  • collapsed

    .igHierarchicalGrid( "collapsed", element:domelement );
    Return Type:
    bool
    Return Type Description:
    returns a boolean value indicating if the parent row specified by the "element" is currently collapsed or expanded.

    Checks if a parent row is currently collapsed.

    • element
    • Type:domelement
    • accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.

    Code Sample

     
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0),
            accessibility = $(".selector").igHierarchicalGrid("collapsed", rowDomElement);

  • commit

    .igHierarchicalGrid( "commit" );

    Commits pending transactions to the client data source for main and all child grids.

    Code Sample

     $(".selector").igHierarchicalGrid("commit");

  • dataBind

    .igHierarchicalGrid( "dataBind" );

    Data binds the hierarchical grid. No child grids will be created or rendered by default, unless there is initialExpandDepth >= 0 set.

    Code Sample

     
        $(".selector").igHierarchicalGrid("dataBind");

  • destroy

    .igHierarchicalGrid( "destroy" );

    Destroys the hierarchical grid by recursively destroying all child grids.

    Code Sample

     $(".selector").igHierarchicalGrid("destroy");

  • expand

    .igHierarchicalGrid( "expand", id:domelement, [callback:function] );

    Expands (toggles) a parent row
    Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

    • id
    • Type:domelement
    • accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.
    • callback
    • Type:function
    • Optional
    • Specifies a custom function to be called when parent row is expanded(optional). Takes 2 arguments first is hierarchical grid object, second is the row element that was expanded.

    Code Sample

            var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0);
        $(".selector").igHierarchicalGrid("expand", rowDomElement);
        // OR
        $(".selector").igHierarchicalGrid("expand", rowDomElement, function () {
          // Custom code executed after the expand operation finishes
        });

  • expanded

    .igHierarchicalGrid( "expanded", element:domelement );
    Return Type:
    bool
    Return Type Description:
    specifies if the row is currently expanded or collapsed.

    Checks if a parent row is expanded or not.

    • element
    • Type:domelement
    • accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.

    Code Sample

     
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0),
            accessibility =  $(".selector").igHierarchicalGrid("expanded", rowDomElement);

  • populated

    .igHierarchicalGrid( "populated", element:domelement );
    Return Type:
    bool
    Return Type Description:
    returns a boolean value indicating if the parent row's child grids are populated and created.

    Checks if a parent row is populated with data.

    • element
    • Type:domelement
    • accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.

    Code Sample

     
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0),
            accessibility =  $(".selector").igHierarchicalGrid("populated", rowDomElement);

  • rollback

    .igHierarchicalGrid( "rollback", [rebind:bool] );

    Clears the transaction log (delegates to igDataSource). Note that this does not update the UI. In case the UI must be updated, set the second parameter "updateUI" to true, which will trigger a call to dataBind() to re-render the contents.

    • rebind
    • Type:bool
    • Optional
    • Whether to perform a rebind.

    Code Sample

     $(".selector").igHierarchicalGrid("rollback", true);

  • root

    .igHierarchicalGrid( "root" );
    Return Type:
    object
    Return Type Description:
    jquery wrapped element of the root grid.

    Returns the element of the root grid (igGrid).

    Code Sample

     
        var hierarchicalGridRoot = $(".selector").igHierarchicalGrid("root");

  • rootWidget

    .igHierarchicalGrid( "rootWidget" );
    Return Type:
    object
    Return Type Description:
    widget object of the root igGrid (not igHierarchicalGrid).

    Returns the widget object of the root grid (igGrid).

    Code Sample

     
        var hierarchicalGridRootWidget = $(".selector").igHierarchicalGrid("rootWidget");

  • saveChanges

    .igHierarchicalGrid( "saveChanges", success:function, error:function );

    Posts to the settings.updateUrl using $.ajax, by serializing the changes as url params.

    • success
    • Type:function
    • Specifies a custom function to be called when AJAX request to the updateUrl option succeeds(optional).
    • error
    • Type:function
    • Specifies a custom function to be called when AJAX request to the updateUrl option fails(optional).

    Code Sample

     
            //Example 1: Save changes without callbacks
            $(".selector").igHierarchicalGrid("saveChanges");
            
            // Example 2: Save changes with success and error callbacks
            $(".selector").igHierarchicalGrid("saveChanges", function (data) {
                $("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);
            },
            function(jqXHR, textStatus, errorThrown) {
                $("#message").text("An error occurred while saving the changes. Error details: " + textStatus).fadeIn(3000).fadeOut(5000);
            });

  • toggle

    .igHierarchicalGrid( "toggle", element:domelement, [callback:function] );

    Expands or collapses (toggles) a parent row
    Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

    • element
    • Type:domelement
    • accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.
    • callback
    • Type:function
    • Optional
    • Specifies a custom function to be called when parent row is toggled(optional). Takes 2 arguments - first is hierarchical grid object, second is the row element that was toggled.

    Code Sample

     
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0);
        $(".selector").igHierarchicalGrid("toggle", rowDomElement);
        //OR
        $(".selector").igHierarchicalGrid("toggle", rowDomElement, function () {
          // Custom code executed after the toggle operation finishes
        });

  • ui-iggrid-childarea

    Classes applied to the child grid TD container when it is expanded.

  • ui-iggrid-childarea-collapsed

    Classes applied to the child grid TD container when it's collapsed.

  • ui-iggrid-childgridseparator

    Achieves a "dotted-line" effect in between two child grids, excluding first and last ones.

  • ui-iggrid-expandbutton ui-icon-plus

    Classes applied to the expand button SPAN, when it's collapsed.

  • ui-iggrid-expandbuttonclick ui-icon-plus

    Classes applied to the expand button SPAN, when it's clicked.

  • ui-iggrid-expandbutton ui-iggrid-expandbuttonexpanded ui-icon-minus

    Classes applied to the expand button SPAN, when it's expanded.

  • ui-iggrid-expandbuttonexpandedhover ui-icon-plus ui-state-hover

    Classes applied to an expanded expand button span, when it's hovered.

  • ui-iggrid-expandbuttonhover ui-icon-plus ui-state-hover

    Classes applied to a collapsed expand button span, when it's hovered.

  • ui-iggrid-expandcolumn

    Classes that are applied to the expander column TD.

  • ui-iggrid-expandcolumn-expanded

    Classes applied when the TD in which the expand/collapse indicator is located, is currently in expand state.

  • ui-iggrid-expandheadercell ui-iggrid-header ui-widget-header

    Classes applied to the special header cell TH which is for the expand column.

  • ui-icon ui-icon-triangle-1-se

    Classes applied to the SPAN holding the expand header cell icon.

  • ui-iggrid-root

    Classes applied to the root grid's table element.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.

#