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