Forums Ignite UI for jQuery
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
Close
Khawaja Hassam
55
Get Children of igHierarchicalGrid on 3rd Level
posted
I have created a 3 level infragistics igHierarchicalGrid which looks like this:

I want to select the the third row with ProductNumber programmatically. I am able to do this till the second level(Pizza) but i am unable to achieve the same thing for the third level entries.

Below is my code for selecting pizza

var parentGrid = grid.igHierarchicalGrid("rootWidget");
var row = parentGrid.rowAt(0);
grid.igHierarchicalGrid("expand", row);   
var subGrids = grid.igHierarchicalGrid("allChildren");
$(subGrids).each(function(index, subGrid) {
    $(subGrid).igGridSelection("selectRow", 0);
});

grid.igHierarchicalGrid("allChildren") returns all the children of currently expanded rows but it returns them as grid elements while my problem is that those elements are also HierarchicalGrids which i want to expand and select the children from.

Parents
No Data
Reply
  • 485
    Verified Answer
    Offline posted

    Hello Khawaja,

     

    Thank you for posting in our forum.

    The “expand” method you are using is asynchronous, meaning you have to use its callback to execute some code if you need to. Inside this callback you have to make another call to the same method, but this time targeting the child grid – that would expand its first row. The “allChildren” method would give you references to all the expanded children or grandchildren – inside the first callback you would need the first element, later in the second callback you would need the second element – it would refer to the level 3 grid. The igGridSelection API provides a method to select a certain row – the “selectRow” method.

    The approach described above would look like this when written in code:

     

    <!DOCTYPE html>
<html>
<head>
      <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet" />
    <!--<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>-->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.lob.js"></script>
    <script type="text/javascript">
        $(function () {
            var data = [
                {
                    Name: "Food",
                    Products: [
                        { Name: "Pizza", Quantity: 4, Details: [
							{ProductNumber: "AK 4763 B", Origin: "Bulgaria"}
						] },
						{ Name: "Bread", Quantity: 3,  Details: [
							{ProductNumber: "AD 6763 B", Origin: "Greece"}
							]  
						}
                    ]
                },
                {
                    Name: "Beverages",
                    Products: [
                        { 
							Name: "Milk", Quantity: 1, Details: [
								{ProductNumber: "PK 2263 J", Origin: "Germany"}
							]  
						},
                        { 
							Name: "Fruit punch", Quantity: 4, Details: [
								{ProductNumber: "MN 9263 J", Origin: "Italy"}
							]  
						}
                    ]
                }
            ];

            $("#hierarchicalGrid").igHierarchicalGrid({
                width: "500px",
                height: "600px",
                dataSource: data,
                fixedHeaders: true,
                autoGenerateColumns: false,
                rendered: function(evt, ui){
                    $("#btn").on("click", function(){
                        let parentGrid = $("#hierarchicalGrid").igHierarchicalGrid("root")
                        let parentGridRow = $(parentGrid).igGrid("rowAt", 0)
                        $(parentGrid).igHierarchicalGrid("expand", parentGridRow, function (){
                            //taking the first expanded child 
                            let childGrid = $("#hierarchicalGrid").igHierarchicalGrid("allChildren")[0]
                            let childGridRow =  $(childGrid).igGrid("rowAt", 0)
                            $(parentGrid).igHierarchicalGrid("expand", childGridRow, function(){
                                //the second element in the array is the second expanded grid, which is actually the level 3 grid
                                let grandChildGrid = $("#hierarchicalGrid").igHierarchicalGrid("allChildren")[1]
                                $(grandChildGrid).igGridSelection("selectRow", 0)
                            })
                        })
                    })
                },
                columns: [
                     { headerText: "Name", key: "Name", dataType: "string", width: "75px" }
                ],
                autoGenerateLayouts: false,
                defaultChildrenDataProperty: "Products",
                columnLayouts: [{
                    name: "Products",
                    childrenDataProperty: "Products",
                    autoGenerateColumns: false,
                    fixedHeaders: true,
                    primaryKey: "Name",
                    columns: [
                    { key: "Name", headerText: "Name" },
                    { key: "Quantity", headerText: "Quantity" }
                    ],
					columnLayouts:[
						{
							name: "Details",
							childrenDataProperty: "Details",
							autoGenerateColumns: true,
							primaryKey: "ProductNumber",
                            features: [
                                {
                                    name: "Selection"
                                }
                            ]
						}
					],
                    features: [
                        {
                            name: "Selection"
                        }
                    ]
                }]
            });
        });
    </script>
</head>
<body>
    <div style="margin: 50px auto; width: 500px">
        <table id="hierarchicalGrid"></table>
    </div>
    <div style="margin: 50px auto; text-align: center">
        <input id="btn" type="button" value="Select 3 level">
    </div>
</body>
</html>

    Please note that in the sample code there is a button that would expand the grids and select the third level grid row, and I am using the "rendered" event callback to attach the button "click" handler - this way I am sure the grid would have been rendered and there won't be an error message in the browser console if the user clicks the button immediately after page load. 

     

    If you need any additional assistance, feel free to contact me.

Children