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.
Hello,
Have you tried binding the data when a child is being created
Please take a look at the following forum thread and let me if it helps.
This thread tells me how to listen for the event and bind the data, but how do I create two child grids under one row in the main grid, and how do I differentiate between them, because they need to have different kinds of data in them.
Hey Dylan,
Having two child grids for a row requires specifying two columnLayouts.
Let's say you have the data for your first level only. Now we need to specify that the data source should not bind deeper than the first level - initial-data-bind-depth="0"
After that you need to bind to event igchildgridcreating in order to populate the data for the children when they are being created. In that event you could use the id of the current element so that you can be sure which child is creating. Also there is information about the parent row id.
Here's a sample to clear this up, please let me know if it helps.
Hi, thanks for replying to my post. I set everything as you did and it seems to work but in the igchildgridcreating event I need to access a data cell of the parent row to use as a query parameter to fill the child grids. I've tried looking all over and at several different examples, but I can't find a way to get the parent row. How can I access it when I create the child grids?
Into the ui args there is ui.id property from which you can extract the primaryKey of the parent row. And then you can use findRecordByKey API method in order to access the parent record:
var parentId = parseInt(ui.id.replace("ig_pk:", "")); var parentRecord = ui.owner.element.igGrid("findRecordByKey", parentId);
Here's an updated sample demonstrating this.
Hi again, disregard my last post, it turned out I wasn't on the latest version of Ignite ui and this was causing my error. Thank you so much for your help.
Great to hear you got that working. If have additional questions on this, please let me know.
rowExpanding : function(e, args){ var objparam = new Object();objparam.strUpdatefor = 'FORM';objparam.struserID = $("#ddlUser").val();objparam.ParentID = args.parentrow[0].cells['2'].innerHTML; corsAjax.get("PageRights/GetFormList", { "data": JSON.stringify(objparam) }, function (objparamData) { if (objparamData !== null && objparamData.length !== undefined && objparamData != []) { $("#tblHierarchicalGrid").on("igchildgridcreating", "destroy"); objData = objparamData; } });},
How to set that objData is my Child Grid Datasource...
In Child Grid creating event datasource is null while loading grid in first time ...how to set Datasource after expand row