jqwidgets and angular integration issues

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

Roman K Roman K · Accepted Answer · 2014-09-23T15:50:14

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>

jqwidgets and angular integration issues

1 Answers