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.
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
Hey Dylan,
Great to hear you got that working. If have additional questions on this, please let me know.
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.
Hi,
This worked, and I am able to access the parent rows, but now whenever I try to run my query to get a child grid's data I get an error that reads :"Syntax error, unrecognized expression: #grid1_NCDataBO:SFCBO:1000-60022769-003 SN258,UserBO:1000,ROHOLMES,1,11/14/2016 7:01:49 PM_FailureHistory_child_scroll", where everything after the first underscore and before the second underscore is the parameter I use for the query. It seems to happen during my fetching of the data, but the error throws on a line where jquery is interacting with the grid, it seems. I'm not sure what this means or why it's happening when it is.