jqwidgets and angular integration issues - angularjs-directive

Question

I'm having a terrible time trying to get a simple jQWidget treegrid working with Angular.
The example using an Angular SPA I'm referring to is here: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs-directives/angularjs-jquery-treegrid.htm
And the initial tutorial page is here: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs-directives.htm
The front end error I'm getting is:
`ReferenceError: dataAdapter is not defined
at eval (eval at link (localhost:49479/app/services/directives.js:234:59), <anonymous>:1:27)
at link (localhost:49479/app/services/directives.js:234:28)`
[app] [HT Error] dataAdapter is not defined
Object {exception: ReferenceError, cause: "<span id="jqxTreeGrid" ng-jqwidgets="jqxTreeGrid" …pageable, columns: columns, disabled: disabled}">"}
cause: "<span id="jqxTreeGrid" ng-jqwidgets="jqxTreeGrid" ng-jqxsettings="{theme: 'metro', source: dataAdapter, width: 850, sortable: sortable, pageable: pageable, columns: columns, disabled: disabled}">"
exception: ReferenceError
and dataAdapter is binded in ng-jqxsettings="{theme: 'metro', source: dataAdapter ...}".
I also noticed as I debug in chorme f12, that my $scope.dataAdapater is empty of the data I have in the source var. In other words, 'source' contains valid data but never gets assigned to dataApapter :
$scope.dataAdapter = new $.jqx.dataAdapter(source);
My dashboard.html contains the <span id="jqxTreeGrid" ...> , which is giving me trouble :
<section id="dashboard-view" class="mainbar" data-ng-controller="dashboard as vm">
<section class="matter">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12"> <!-- HIERARCHY GRID -->
<div class="widget wlightblue">
<div data-cc-widget-header title="{{'Hierarchy'}}" subtitle="" allow-collapse="true"></div>
<div class="widget-content text-left text-info" style="float:left; border:none;">
<span>THIS IS A TEST</span>
<span id="jqxTreeGrid" ng-jqwidgets="jqxTreeGrid"
ng-jqxsettings="{theme: 'metro', source: dataAdapter, width: 850, sortable: sortable, pageable: pageable, columns: columns, disabled: disabled}">
</span>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
and my controller is :
(function () {
'use strict';
var controllerId = 'dashboard';
angular.module('app').controller(controllerId, ['common', 'datacontext', '$scope', dashboard ]);
function dashboard(common, datacontext, $scope) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var vm = this;
vm.news = {
title: 'Test Online',
description: 'queries to dynamically aggregate data. .'
};
activate();
function activate($scope) {
var promises = [getMessageCount(), getCountries(), getMemberMtm(), initJqTreeGrid()];
common.activateController(promises, controllerId)
.then(function () { log('Activated Dashboard View'); });
}
///jQWidgets treegrid settings
function initJqTreeGrid() {
var source =
{
dataType: "array",
dataFields: [
{ name: "name", type: "string" },
{ name: "quantity", type: "number" },
{ name: "id", type: "string" },
{ name: "parentid", type: "number" },
{ name: "price", type: "number" },
{ name: "date", type: "date" },
{ name: "customer", type: "string" }
],
hierarchy:
{
keyDataField: { name: 'id' },
parentDataField: { name: 'parentid' }
},
id: 'id',
localData: generateordersdata()
};
$scope.dataAdapter = new $.jqx.dataAdapter(source);
$scope.theme = "metro";
$scope.sortable = true;
$scope.pageable = true;
$scope.disabled = false;
$scope.columns = [
{ text: 'Order Name', dataField: "name", align: 'center', width: 200 },
{ text: 'Customer', dataField: "customer", align: 'center', width: 200 },
{ text: 'Price', dataField: "price", cellsFormat: "c2", align: 'center', cellsAlign: 'right', width: 80 },
{
text: 'Order Date', dataField: "date", align: 'center', cellsFormat: "dd-MMMM-yyyy hh:mm", cellsRenderer: function (rowKey, column, cellValue, rowData, cellText) {
if (rowData.level === 0) {
return $scope.dataAdapter.formatDate(cellValue, "dd-MMMM-yyyy");
}
return cellText;
}
}
];
}
Your advice will be greatly appreciate by me.
regards,
Bob

Answer 1

I used a different example from their tutorial and was able to get it running. Slight difference, I am having my settings within controller definition, rather then inline. I had better luck with that. Loading order makes all the difference as well. Here is my code for the grid example.
JavaScript:
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
// Grid data.
var data = new Array();
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];
for (var i = 0; i < firstNames.length; i++) {
var row = {};
row["firstname"] = firstNames[i];
row["lastname"] = lastNames[i];
row["title"] = titles[i];
row["city"] = city[i];
row["country"] = country[i];
data[i] = row;
}
$scope.people = data;
$scope.bindingCompleted = "";
$scope.settings =
{
altrows: true,
width: 800,
height: 200,
editable: true,
ready: function()
{
$scope.settings.apply('selectrow', 1);
},
sortable: true,
source: $scope.people,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'First Name', datafield: 'firstname', width: 150 },
{ text: 'Last Name', datafield: 'lastname', width: 150 },
{ text: 'Title', datafield: 'title', width: 150 },
{ text: 'City', datafield: 'city', width: 150 },
{ text: 'Country', datafield: 'country' }
],
bindingcomplete: function (event) {
$scope.bindingCompleted = "binding is completed";
}
}
});
</script>
HTML:
<div ng-app="demoApp" ng-controller="demoController">
<jqx-grid jqx-settings="settings"></jqx-grid>
</div>