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
160
InfragisticsUI grid with dynamic rows & columns
posted

I have real time data. Server returns data source and columns after some time interval. These columns and data can be different each time. Is this possible to have dynamic rows and columns with IG grid?

I am using angular directive and ideally whenever scope is updated, it should auto reflect but it doesn't seems to be working:


/********************************** JS*/ 

function initialize() {
    initializeGridConfig();
    $interval(function() {
        getDataAndColums();
    }, 50000);
}
function initializeGridConfig() {
    $scope.gridOptions = {
        dataSource: $scope.gridDataSrc,
        width: 800,
        height: 300,
        primaryKey: "id",
        autoGenerateColumns: true,
        childDataKey: "products",
        columns: $scope.gridColumns
    };
}
function getDataAndColums() {
    $.post('/Main/GetUpdatedInfo', function(data) {
        $scope.gridColumns = data.columns;
        $scope.gridDataSr = data.src;
        //$scope.gridOptions.columns =  data.columns; //this is also not working
        //$scope.gridOptions.dataSource=  data.columns; //this is also not working
    });
}
initialize();

/**********************************HTML*/
<div id="igniteGridId" ig-tree-grid="gridOptions"></div>
/*************************** External Links


<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://github.com/IgniteUI/igniteui-angular/blob/master/src/igniteui-angular.js"></script> 

Parents
No Data
Reply Children
No Data