Datatable Angular bindings does not update table data

Webix JS
#1

Datatable is not reflecting $scope updates if the table is configured in a controller via webix-ui=“datatable_config”. Bindings does work fine if the table is configured in html only. What I’m missing?

Pressing Add Row - button does add a row at first time, but consecutive clicks does nothing:

<!doctype html>
<html lang="en" ng-app="webixApp">
<head>
  <meta charset="utf-8">
  <title>Webix - Angular  : Grid</title>

  <script src="vendor/js/angular.min.js"></script>

  <link rel="stylesheet" type="text/css" href="vendor/webix/codebase/webix.css">
  <script type="text/javascript" src="vendor/webix/codebase/webix.js"></script>

</head>
<body ng-controller="webixTestController">

<div style="width:750px;">
  <div webix-ui="datatable_config">
  </div>
</div>

<br>
<button ng-click="addRecord()">Add Row</button>

<script>
var app = angular.module('webixApp', [ "webix" ]);

app.controller("webixTestController", function($scope){
  $scope.records = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4},
{ id:5, title:"My Fair Lady", year:1964, votes:533848, rating:8.9, rank:5},
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6}
  ];
  
  $scope.datatable_config = {
view: "datatable",    
autoheight: true,
select: "row",
data: $scope.records,
columns:[
    { id:"rating", 	header: "Rating"},
    { id:"year", 	header: "Year"},
    { id:"votes",  	header: "Votes"},
    { id:"title",  	header: "Title"},
]
  };      

  $scope.addRecord = function(){
$scope.records.push({
    title:"New Record",
    rating:999,
    votes:0,
    year:2013
});
  };
});
</script>


</body>
</html>

Consecutive clicks works fine if the table is configured in html:

<!doctype html>



Webix - Angular : Grid

  <script src="vendor/js/angular.min.js"></script>

  <link rel="stylesheet" type="text/css" href="vendor/webix/codebase/webix.css">
  <script type="text/javascript" src="vendor/webix/codebase/webix.js"></script>

</head>
<body ng-controller="webixTestController">

<div style="width:750px;">
  <div webix-ui view="datatable" webix-data="records" autoheight="true" select="row">
<div view="column" id="rating">Rating</div>
<div view="column" id="year">Year</div>
<div view="column" id="votes">Votes</div>
<div view="column" id="title">Title</div>  
  </div>
</div>

<br>
<button ng-click="addRecord()">Add Row</button>

<script>
var app = angular.module('webixApp', [ "webix" ]);

app.controller("webixTestController", function($scope){
  $scope.records = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4},
{ id:5, title:"My Fair Lady", year:1964, votes:533848, rating:8.9, rank:5},
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6}
  ];

  $scope.addRecord = function(){
$scope.records.push({
    title:"New Record",
    rating:999,
    votes:0,
    year:2013
});
  };
});
</script>


</body>
</html>
#2

Fixed by moving data: $scope.records from datatable_config to webix-data=“records” in div-element. Is this a bug or should the data be always defined in div-element? If should, I think the data-option in js-config should be discarded if Angular is loaded.

Also noticed that there can’t be any extra characters between webix-ui-div opening tag and closing tag.
Ie. this fails:

<div webix-ui="datatable_config" webix-data="records">
</div>

Correct statement:

<div webix-ui="datatable_config" webix-data="records"></div>

This should be fixed or mentioned in documentation.

#3

When you are using data:$scope.records it just injects the data from this collection in the datatable, but it will not add a watcher which will react on further changes in the collection.

When you are using webix-data, code creates a watcher for the collection, and will update the component each time when data in the collection is changed.

As for documentation, yes, you are right. And instead of updating docs, we will fix the current behavior, so whitespaces inside of webix-ui will be allowed.

#4

Could you provide an example of the above webix-ui=“datatable_config” webix-data=“myList” working together? I have removed data:$scope.myList on my angular controller datatable initialization and added webix-data=“records” directive, resulting in no data being displayed. The way I am updating the scope is $scope.myList = myListFromADataService

#5

it does work, my problem was with a pager added on the 2nd row of the datatable configuration object. Removed the pager, removed the rows, left a barebones datatable config object, voila. Need to figure out how to get the pager back without breaking the webix-data watch…