Hi, I'm trying to build a hierarchical grid in a page using a combination of angular, and jquery, but for some reason, none of the expand buttons are showing on the grid. Here is my html for the grid:
<ig-hierarchical-grid id="failureGrid" data-source="data" width="100%" height="150" auto-commit="true" primary-key="INCIDENT_NUMBER" auto-generate-columns="false" auto-generate-layouts="false" enable-hover-styles="false" intial-data-bind-depth="0"> <features> <feature name="Selection" event-row-selection-changed="ncc.failureChanged" event-row-selection-changing="ncc.failureChanging"></feature> <feature name="Resizing"></feature> <feature name="Sorting"></feature> </features> <columns> <column key="NC_CODE" header-text="NC Code" width="200px" data-type="string"></column> <column key="NC_STATE" header-text="NC State" width="150px" data-type="string"></column> <column key="StatusCounts" header-text="O/P/V" width="150px" data-type="string"></column> <column key="INCIDENT_NUMBER" header-text="Incident Number" width="150px" data-type="string"></column> <column key="OPERATION" header-text="Operation" width="130px" data-type="string"></column> <column key="DATE_TIME" header-text="Date/Time" width="180px" data-type="date" format="MM/dd/yy HH:mm:ss tt"></column> <column key="EMPLOYEE_NAME" header-text="Employee" width="150px" data-type="string"></column> </columns> <column-layouts> <column-layout key="History" response-data-key="" primary-key="HISTORY_SNAPSHOT_ID" auto-generate-columns="false" width="100%" enable-hover-styles="false"> <columns> <column key="HISTORY_DATE" header-text="History Date" width="200px" data-type="date" format="MM/dd/yy HH:mm:ss tt"></column> <column key="HISTORY_SNAPSHOT_ID" header-text="Edit Snapshot ID" width="50px" data-type="number"></column> <column key="HISTORY_SNAPSHOT_USER" header-text="Edit Snapshot User" width="150px" data-type="string"></column> </columns> <features> <feature name="Selection" event-row-selection-changed="ncc.failureChanged" event-row-selection-changing="ncc.failureChanging"></feature> <feature name="Resizing"></feature> <feature name="Sorting"></feature> </features> </column-layout> </column-layouts> </ig-hierarchical-grid>
I can't see any errors, but for some reason the expand buttons just don't show up. There's no way for me to create the child grids. Any help would be appreciated. Thanks.
Hello Dylan,
Thank you for posting in our forum.
Could you let me know what the schema of the data source you’ve set is?
In general the column layout key should point to the object that contains the child data for each record and if the data inside that object is wrapped in other objects the path should be specified via the response-data-key option.
Probably in your case the column layout key and/or the response data key don’t match the data schema so the grid cannot map to that data and generate child grids.
Here’s a working example for your reference:
http://jsfiddle.net/8vxdxcvd/
Note that in it the column layout has a key and response data key:
<column-layout key="Orders" response-data-key="results" …
And note that the used data source (http://www.igniteui.com/js-data/northwind ) , has an Orders object for each record which wraps the data in “results”:
"Orders": {
"results": [{…
"OrderID": 10258,
"CustomerID": "ERNSH",
"EmployeeID": 1,
…
So that the column layout definition will map to the correct data to bind for each child grid.
I hope you'll find this information useful. I’m looking forward to your reply.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://www.infragistics.com/support
Hi,
Thanks for replying to my question. I would like to bind the data dynamically as the user opens up each child grid using the igchildgridcreating event. I asked a previous question here: http://www.infragistics.com/community/forums/p/108452/510936.aspx#510936, and got this to work. I am using this project as a reference, but this time I do not have multiple child grids, just one. However, during my troubleshooting by simply creating a json object manually full of dummy data that contained all the parent rows and their respective child rows as part of the parent row objects, and then setting the datasource to that json object as is shown in that fiddle, but during regular code, not the child grid creating event, and still the grid doesn't show any expansion buttons. I can't seem the get the grid to realize it's a hierarchical grid.
Could you share a small sample that demonstrates your exact scenario?
I’ve attempted to reproduce this on my side, however I was not able to. You can refer to the following fiddle:
http://jsfiddle.net/8vxdxcvd/3/
In this case the child object is changed to be an empty array so that the children will be initially empty. Still the hierarchical grid generates expansion indicators.
If you could share a small sample that reproduces the issue or modify the existing one so that it reproduces the issue that would help in further investigating the exact cause of the issue.
I got it to work, for some reason removing the data-response-key tag fixed the issue. Thank you for your help.
I’m glad to hear you've resolved your issue. Let me know if you have any additional questions or concerns.