I am using the angular js directive for Iggrid. i am using the options object in my controller for loading the grid data. But grid is loading the data not the child rows i am sharing the code below if some one can investigate it why this is happening.
HTML CODE:
<div class="viewport" style="overflow:auto"> <div id="gridMyGrid" ig-grid="gridOptions" > <!--<columns>--> <!--<column key="id" header-text="ID" width="100px" data-type="number"></column>--> <!--<column key="tasks" header-text="Tasks" width="250px" data-type="string"></column>--> <!--<column key="start" header-text="Start" width="100px" data-type="date"></column>--> <!--<column key="finish" header-text="Finish" width="100px" data-type="date"></column>--> <!--<column key="duration" header-text="Duration" width="100px" data-type="date"></column>--> <!--<column key="progress" header-text="Progress" width="100px" data-type="percent"></column>--> <!--</columns>--> </div> <div><button class="btn" ng-click="pushData()">Update Rows</button></div>
Controller code:
var options = { primaryKey: "name", childDataKey: "share_details", width: '100%', height: 400, autoGenerateColumns: true, defaultColumnWidth: "150px",// columns: [// { headerText: "Name", key: "name", dataType: "String"},// { headerText: "Description", key: "description", dataType: "string"},// { headerText: "Qunatity", key: "quantity", dataType: "number"},// { headerText: "P/L", key: "p_l", dataType: "number"},// { headerText: "Total P/L", key: "total_p_l", dataType: "number"},// { headerText: "Delta Notional Gross", key: "delta_notional_gross", dataType: "number"},// { headerText: "Delta Notional Long", key: "delta_notional_log", dataType: "number"},// { headerText: "Delta Notional Short", key: "delta_notional_short", dataType: "number"},// { headerText: "Delta", key: "delta", dataType: "number"},// { headerText: "Gamma", key: "gamma", dataType: "number"},// { headerText: "Vega", key: "vega", dataType: "number"},// { headerText: "Theta", key: "theta", dataType: "number"},// { headerText: "Implied Volatility", key: "implied_volatility", dataType: "number"},// { headerText: "Beta", key: "beta", dataType: "number"},// { headerText: "Portfolio HVaR", key: "portfolio_hvar", dataType: "number"},// { headerText: "Historical Value-at-risk", key: "historical_value_at_risk", dataType: "number"},// { headerText: "SecPxs Down 100bps", key: "secpxs_down_100bps", dataType: "number"},// { headerText: "SecPxs +15%", key: "ssec_pxs_plus15percent", dataType: "number"},// { headerText: "SecPxs -15%", key: "sec_pxs_minus15percent", dataType: "number"},// ], dataSource: realObject, features: [ { name:"Updating" },// {// name : "Sorting",// columnSettings : [// {// columnKey: "name",// allowSorting: true,// firstSortDirection: "ascending",// currentSortDirection: "ascending"// }// ]// }, { name: "ColumnMoving", columnMovingDialogContainment: "window" } ] };// for(var j=0;j<realObject.length;j++){// _.sortKeysBy(realObject[j]);// } console.log(compData); console.log("Real Nested Object"); console.log(realObject); $scope.gridOptions = options;
This is my data source for Tree Grid.
var realObject = [{ "p_l": 68.5600000000004, "total_p_l": 68.5600000000004, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "LN 200", "qunatity": 200, "share_details": [ { "p_l": 68.5600000000004, "total_p_l": 68.5600000000004, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "LN 200 08/14/2016", "qunatity": 10, } ] }, { "p_l": 1530, "total_p_l": 1530, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "SPY -15", "qunatity": -15, "share_details": [ { "p_l": 68.5600000000004, "total_p_l": 68.5600000000004, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "SPY -15 200 08/10/2016", "qunatity": 10, }, { "p_l": 75, "total_p_l": 89, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "SPY -15 200 08/15/2016", "qunatity": 10, }, { "p_l": 98, "total_p_l": 79, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "SPY -15 08/22/2016", "qunatity": 10, }, { "p_l": 45, "total_p_l": 67, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "SPY -15 08/30/2016", "qunatity": 10, } ] }, { "p_l": -80, "total_p_l": -80, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "APPY 1000", "qunatity": 1000, "share_details": [ { "p_l": 68.5600000000004, "total_p_l": 68.5600000000004, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "APPY 1000 08/10/2016", "qunatity": 10, } ] }, { "p_l": 30, "total_p_l": 30, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "BDX 4", "qunatity": 4, "share_details": [ { "p_l": 65, "total_p_l": 49, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "BDX 4 08/15/2016", "qunatity": 10, } ] }, { "p_l": 330, "total_p_l": 330, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "GPRO 20", "qunatity": 20, "share_details": [ { "p_l": 34, "total_p_l": 45, "delta_notional_gross": 0, "delta_notional_log": 0, "delta_notional_short": 0, "delta": 0, "gamma": 0, "vega": 0, "theta": 0, "implied_volatility": 0, "beta": 0, "portfolio_hvar": 0, "historical_value_at_risk": 0, "secpxs_down_100bps": 0, "sec_pxs_plus15percent": 0, "sec_pxs_minus15percent": 0, "name": "GPRO 20 08/23/2016", "qunatity": 10, } ] }
]
Any help is appreciated.
Hello,
Please provide more information on what is currently being rendered when running this code.
Does this behavior also occur when not utilizing the angular directives?
Hi sam,
This code is showing the grid but not with child rows and this behaviour only occurs when i utilize the angular directive with class attribute not element attribute. I mean i set a grid options object in my controller and i use a div with id="gridMyGrid" and an attribute ig-grid="gridOptions" as i mentioned in the code then it shows only parent rows not the child rows but when i use the grid with elemtn grid like this <ig-tree-grid id="grid1" data-source="realObject" height="450px" primary-key="name" auto-commit="true" auto-generate-columns="true"> </ig-tree-grid> it works fine and show the data with child rows so unable to find out what is the problem in the earlier method please look at the code which i shared above
Thanks
Jahanzaib
Glad to hear you were able to solve this issue.
Let me know if you have any questions regarding this matter.
I am able to resolve the issue. The issue was actually in my grid div
Thanks,
In the documentation provided in our GitHub page, a custom attribute can be applied to elements which instantiates the controls can be utilized. The documentation can be found here: https://github.com/IgniteUI/igniteui-angular#controller-initialization
In the div element, you currently have this:
<div id="gridMyGrid" ig-grid="gridOptions" >
The div should be refactored as a table element and the attribute should be data-ig-grid rather than ig-grid:
<table id="grid" data-ig-grid="gridOptions"></table>
Let me know if you have any questions.