Updating Dataview Data and Columns (Angular JS)

Hi,

I’m in the middle of writing an application in Angular JS and I’m considering integrating Webix. I’ve started a few spikes. One of them involves the DataTable Component. In my case the data table is used to display financial statements, so paging occurs across columns rather than rows. The user can chose to consolidate the statements monthly, quaterly, or yearly and the logic for that is provided by the methods of an object defined in a factory module.

Currently this is implemented by using nested ng-repeat directive on of the header and the 's, which for the former would look like this when ported to Webix:

 <div webix-ui view="datatable" webix-data="records" autoheight="true" select="row">
   <div ng-repeat="column in columns" view="column" id="{{column.id}}" sort="int">{{column.label}}</div>

This doesn’t work. So I defined the dataTable in a factory module and it is then passed onto the controller’s scope. That works fine. The issue I have is in updating the columns and data. This is the code I would use in the controller when I need to change the content of the table:

$scope.add_columns = function() {
var col =[];
for (var i in $scope.tableColumns ) {
    col.push({
        id:"c"+webix.uid(),
        header:$scope.tableColumns[i],
        sort:"int"
    });
}
$scope.table.config.columns = col;
$scope.table.refreshColumns();
console.log($scope.table.getItem(6));   // Object {id: 6, title: "12 Angry Men", year: 1957, votes: 164558, rating: 8.9…}
$scope.table.clearAll();
$scope.table.parse({data: $scope.records});
//This also updates the data with the same result as the line above
//small_film_set.forEach(function(rec){
//    rec.id = webix.uid();
//    $scope.table.add(rec)
//});

$scope.table.refresh();
console.log('item 6',$scope.table.getItem(6));  // Object {id: 6, title: "12 Angry Dudes", ..}
}

The table is displayed with the correct headers and the correct number of rows, but there is no data in any of the cells. logging $scope.table.pull() also displays the expected result. I’m at a loss here…

I would also appreciate if you could point me in the right direction for using the paging component and the event/method I would need to override. Basically, I have an array pagedStatement where the index is the page to be display and contains all column/data info. Most likely the pager component onChange event would call the above function passing pageStatement[pageNumber] as a parameter.

Your help would be much appreciated!

Cheers,

larry