Webix + angularjs datatable from controller - angularjs

Question

I have the problem, because datatable is empty, data doesn't binding.
html:
<div id="usersFormDiv" ng-controller="adminController">
<div webix-ui="usersGrid"></div>
</div>
controller
$scope.usersGrid ={
view:"datatable",
id:"usersGridWebix",
autoConfig:true,
select:"row",
data : [
{ id:1,"lp":1, "name":1994,"surname":678790,"email":"xxx#xp.pl","organ":"ogran","location":"Lokalizacja 1, Lokalizacja 2"}
],
columns:[
{ header:"Lp", id:"lp", width:50},
{ header:"Imię", id:"name", width:50},
{ header:"Nazwisko", id:"surname", width:100},
{ header:"Email", id:"email", width:150},
{ header:"Organ", id:"organ", width:100},
{ header:"Lokalizacja", id:"location", width:150}
]
// url: "./app/model/users.json"
};

Answer 1

with webix-ui attribute in div use webix-data="data"
also put
$scope.data = { id:1,"lp":1, "name":1994,"surname":678790,"email":"xxx#xp.pl","organ":"ogran","location":"Lokalizacja 1, Lokalizacja 2"}
I have the same problem, i fixed using this way, for more details refer:-
http://docs.webix.com/desktop__angular.html

Answer 2

You can define the data table structure either on html or within controller as well.
if (window.angular)
(function() {
function id_helper($element) {
//we need uniq id as reference
var id = $element.attr("id");
if (!id) {
id = webix.uid();
$element.attr("id", id);
}
return id;
}
function locate_view_id($element) {
if (typeof $element.attr("webix-ui") != "undefined")
return $element.attr("id");
return locate_view_id($element.parent());
}
//creates webix ui components
angular.module("webix", [])
.directive('webixUi', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var dataname = $attrs["webixUi"];
var callback = $attrs["webixReady"];
var watch = $attrs["webixWatch"];
var wxRoot = null;
var id = id_helper($element);
$element.ready(function() {
if (wxRoot) return;
if (callback)
callback = $parse(callback);
//destruct components
$element.bind('$destroy', function() {
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//ensure that ui is destroyed on scope destruction
$scope.$on('$destroy', function() {
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//webix-ui attribute has some value - will try to use it as configuration
if (dataname) {
//configuration
var watcher = function(data) {
if (wxRoot) wxRoot.destructor();
if ($scope[dataname]) {
var config = webix.copy($scope[dataname]);
config.$scope = $scope;
$element[0].innerHTML = "";
wxRoot = webix.ui(config, $element[0]);
if (callback)
callback($scope, {
root: wxRoot
});
}
};
if (watch !== "false")
$scope.$watch(dataname, watcher);
watcher();
} else {
//if webix-ui is empty - init inner content as webix markup
if (!$attrs["view"])
$element.attr("view", "rows");
var ui = webix.markup;
var tmp_a = ui.attribute;
ui.attribute = "";
//FIXME - memory leaking, need to detect the moment of dom element removing and destroy UI
if (typeof $attrs["webixRefresh"] != "undefined")
wxRoot = ui.init($element[0], $element[0], $scope);
else
wxRoot = ui.init($element[0], null, $scope);
ui.attribute = tmp_a;
if (callback)
callback($scope, {
root: wxRoot
});
}
//size of ui
$scope.$watch(function() {
return $element[0].offsetWidth + "." + $element[0].offsetHeight;
}, function() {
if (wxRoot) wxRoot.adjust();
});
});
}
};
}])
.directive('webixShow', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var attr = $parse($attrs["webixShow"]);
var id = id_helper($element);
if (!attr($scope))
$element.attr("hidden", "true");
$scope.$watch($attrs["webixShow"], function() {
var view = webix.$$(id);
if (view) {
if (attr($scope)) {
webix.$$(id).show();
$element[0].removeAttribute("hidden");
} else
webix.$$(id).hide();
}
});
}
};
}])
.directive('webixEvent', ["$parse", function($parse) {
var wrap_helper = function($scope, view, eventobj) {
var ev = eventobj.split("=");
var action = $parse(ev[1]);
var name = ev[0].trim();
view.attachEvent(name, function() {
return action($scope, {
id: arguments[0],
details: arguments
});
});
};
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var events = $attrs["webixEvent"].split(";");
var id = id_helper($element);
setTimeout(function() {
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
for (var i = 0; i < events.length; i++) {
wrap_helper($scope, view, events[i]);
}
});
}
};
}])
.directive('webixElements', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var data = $attrs["webixElements"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection) {
setTimeout(function() {
var view = webix.$$(id);
if (view) {
view.define("elements", collection);
view.refresh();
}
}, 1);
});
}
};
}])
.directive('webixData', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var data = $attrs["webixData"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection) {
if (collection) {
setTimeout(function() {
loadData($element, id, collection, 0);
}, 1);
}
});
}
};
}]);
function loadData($element, id, collection, num) {
if (num > 10) return;
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
if (view) {
if (view.options_setter) {
view.define("options", collection);
view.refresh();
} else {
if (view.clearAll)
view.clearAll();
view.parse(collection);
}
} else {
webix.delay(loadData, this, [$element, id, collection], 100, num + 1);
}
}
})();
{
"student": [ {
"firstName": "Ajinkya", "lastName": "Chanshetty", "contact": 9960282703, "email": "aajinkya#hotmail.com"
}
,
{
"firstName": "Sandip", "lastName": "Pal", "contact": 9960282703, "email": "sandip#hotmail.com"
}
,
{
"firstName": "Neha", "lastName": "Sathawane", "contact": 99608882703, "email": "neha#hotmail.com"
}
,
{
"firstName": "Gopal", "lastName": "Thakur", "contact": 9960000703, "email": "gopal#hotmail.com"
}
]
}
<!doctype html>
<html lang="en" ng-app="webixApp">
<head>
<meta charset="utf-8">
<title>Webix - Angular : Layouts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="https://cdn.webix.com/edge/webix.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
var app = angular.module('webixApp', ["webix"]);
app.controller('jsonCtrl', function($scope, $http) {
$http.get('data.json').then(function(response) {
$scope.content = response.data.student
})
})
app.controller('extCtrl', function($scope, $http) {
$scope.myTable = {
view: "datatable",
columns: [{
id: "name",
header: "Name",
css: "rank",
width: 150
},
{
id: "username",
header: "UserName",
width: 150,
sort: "server"
},
{
id: "email",
header: "Email ID",
width: 200,
sort: "server"
},
{
id: "website",
header: "Website",
width: 150
}
],
autoheight: true,
autowidth: true,
url: "https://jsonplaceholder.typicode.com/users"
}
})
</script>
</head>
<body>
<div webix-ui type="space">
<div height="35">Welcome to Angular Webix App </div>
<div view="cols" type="wide" margin="10">
<div width="200">
<input type="text" placeholder="Type something here" ng-model="app"> Hello {{app}}!
</div>
<div view="resizer"></div>
<div view="tabview" ng-controller="jsonCtrl">
<div header="JSON Data Fetch Example">
<div ng-controller="jsonCtrl">
<div webix-ui view="datatable" webix-data="content" autoheight="true" select="row" fillspace="true">
<div autowidth="true" view="column" id="firstName" sort="int" css="rating" scrollY="true">First Name</div>
<div view="column" id="lastName" sort="int">Last Name</div>
<div view="column" id="contact" sort="int">Contact</div>
<div view="column" id="email" sort="string" width="200">E mail</div>
</div>
</div>
</div>
</div>
<div view="resizer"></div>
<div view="tabview" ng-controller="extCtrl">
<div header="External Source Data Table">
<div webix-ui="myTable"></div>
</div>
</div>
</div>
</div>
</body>
</html>