So I am currently creating a javascript/html page using jquery and angular with a hierarchical grid whose rows each expand into two child grids. I can set the main grid's data just fine, by setting its datasource to an array of objects I get from my database. I don't want to load the data in the child grids until the user actually expands a row. In addition, both child grid has different data which comes from different queries, and I can't figure out how to refer to them separately in order to set the dataSource. How can I, upon the user expanding a row, set the datasource like I do for the parent grid for each child grid independently?

My html code for my grid is as such:

                   <ig-hierarchical-grid id="grid1"
                                    data-source="data"
                                    width="100%"
                                    height="100%"
                                    auto-commit="true"
                                    auto-generate-columns="false"
                                    auto-generate-layouts="false"
                                    expand-collapse-animations="false"
                                    enable-hover-styles="false">
                    <features>
                        <feature name="Sorting"></feature>
                        <feature name="Filtering"></feature>
                        <feature name="Resizing"></feature>
                    </features>
                    <columns>
                        <column key="SFC" header-text="SFC" width="200px" data-type="string"></column>
                        <column key="COMMENTS" header-text="Comments" width="200px" data-type="string"></column>
                        <column key="CATEGORY" header-text="NC Category" width="200px" data-type="string"></column>
                        <column key="INCIDENT" header-text="Incident Number" width="200px" data-type="string"></column>
                        <column key="NAME" header-text="Employee Name" width="200px" data-type="string"></column>
                    </columns>
                    <column-layouts>
                        <column-layout key="Defects" auto-generate-columns="false" width="100%" enable-hover-styles="false">
                            <columns>
                                <column key="CATEGORY" header-text="Category" width="200" data-type="string"></column>
                                <column key="COMMENTS" header-text="Comments" width="200" data-type="string"></column>
                                <column key="NAME" header-text="Employee Name" width="200" data-type="string"></column>
                                <column key="MATERIAL" header-text="Material" width="200" data-type="string"></column>
                                <column key="GROUP_ID" header-text="Group ID" width="200" data-type="string"></column>
                            </columns>
                            <features>
                                <feature name="Resizing"></feature>
                                <feature name="Sorting"></feature>
                            </features>
                        </column-layout>
                        <column-layout key="FailureHistory" auto-generate-columns="false" width="100%" enable-hover-style="false">
                            <columns>
                                <column key="SFC" header-text="SFC" width="200px" data-type="string"></column>
                                <column key="COMMENTS" header-text="Comments" width="200px" data-type="string"></column>
                                <column key="CATEGORY" header-text="NC Category" width="200px" data-type="string"></column>
                                <column key="INCIDENT" header-text="Incident Number" width="200px" data-type="string"></column>
                                <column key="NAME" header-text="Employee Name" width="200px" data-type="string"></column>
                            </columns>
                        </column-layout>
                    </column-layouts>
                </ig-hierarchical-grid>

I set the parent grid's datasource by getting an array of objects from my database based on user input, and set the datasource like this:

                        $("#grid1").igGrid("option", "dataSourceType", "json");
                        $("#grid1").igGrid("option", "dataSource", $scope.data);
              

In this case, $scope.data contains the array in which the data is contained.

All of the examples I can find on the Igniteui pages aren't much help, as they seem to all use static data and most of it is in C#. Any help or tips would be really appreciated.