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
Dylan Rich
170
Expand Buttons not showing in Hierarchical Grid
posted

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.

Parents
  • 29417
    Offline posted

    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://es.infragistics.com/support

     

     

  • 170
    posted in reply to Maya Kirova

    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://es.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.

Reply Children