CODEWITHSUNDEEP
javascriptangularjsinfragisticsignite-ui
jahanzaib kk
jahanzaib kk

Reputation: 688

Ignite UI tree grid is not updaing the table with new data

I am integrating the Ignite UI tree grid angular directive in my application . I am initializing the grid with empty data source because data is loaded from server, and then assigning the data from server to datasource of tree grid but it is not updating the data in the table. When i use the ig grid directive then it is working but when i use the ig grid tree directive it is not working. If some one wants to see the code i can share it.
This is my div element for binding the ig grid as an attribute.

  <div ng-controller= "gridController">
 <div  id="gridMyGrid" ig-tree-grid="gridOptions" ></div>
  </div>


This is code in my controller with a grid options object.

    angular.module('gridModule',['igniteui-directives'])
  .controller('gridController',function($scope){
      var  realObject = [
                         {"p_l": 68,
    "total_p_l": 68,
    "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": []
           }
                ]
        $scope.realObject =[];
          var options = {
                    primaryKey: "name",
                    childDataKey: "share_details",
                    width: '100%',
                    height: 400,
                    autoGenerateColumns: true,


                    dataSource: $scope.realObject,
                    features: [


                        {
                            name: "ColumnMoving",
                            columnMovingDialogContainment: "window"
                        }
                    ]
                };
      $scope.gridOptions = options;


           $timeout(function(){
                                $scope.realObject.push(realObject[2]);
                                $scope.gridOptions.dataSource = $scope.realObject;


                            },5000)
})

Any help is appreciated.

Adding the examples on js fiddle what i am expecting.
The link without tree structure and updating the data
Link for JS Fiddle


The link with tree structure which is not updating the data.
Link for JS Fiddle with Tree structure

Upvotes: 2

Views: 845

Answers (1)

dkamburov
dkamburov

Reputation: 394

igTreeGrid doesn't have Two way data-binding support for AngularJS.(igGrid does)

So you need to manually dataBind the igTreeGrid. I modified the sample the with the manual data bind.

$("#grid1").igTreeGrid("dataBind");

Link to JS Fiddle

Or you can use the igTreeGridUpdating api to change the data instead of changing the scope data.

Upvotes: 2

Related Questions