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.
Glad to hear you were able to solve this issue.
Let me know if you have any questions regarding this matter.
Hi sam,
I am able to resolve the issue. The issue was actually in my grid div
Thanks,
Jahanzaib
Hello,
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.
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
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?