jQWidgets Forums

Tagged: angularjs datagrid, angularjs datagridview, angularjs grid, angularjs gridview, jqwidgets angularjs grid

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Refreshing a Grid in Angular.js Posts
October 13, 2014 at 8:48 am Refreshing a Grid in Angular.js #61029
denisv
Participant
I’ve just started using jqWidgets, and I haven’t been using Angular.js for very long.

Up to now I’ve been using a table in Angular to display a list of Person objects, where each person has a name and initials. I get the objects asynchronously from a database, and I use a ‘loaded’ flag with ng-show to update the table. This happens when the page is first loaded via data-ng-init in the <body> tag, and when the Refresh button is clicked, as shown below:
```
// index.html

<body ng-app="smApp" ng-controller="PersonCtrl" data-ng-init="refresh()">

<h3>Persons</h3>

<table class="table">
    <thead>
    <tr>
        <th>Name</th>
        <th>Initials</th>
    </tr>
    </thead>
    <tr ng-repeat="person in persons | orderBy: 'name'" ng-show="loaded">
        <td>{{person.name}}</td>
        <td>{{person.initials}}</td>
    </tr>
</table>

<button id="refresh-btn" class="btn btn-primary" ng-click="refresh()">Refresh</button>

// app.js

app.controller("PersonCtrl", function ($scope, $log, $timeout, ...) {

    $scope.refresh = function () {
        $scope.loaded = false;
        Repository.personRepository(db).getAll(Systematic.types.person,
			getAllCallback, errorCallback);
    };

    function getAllCallback(personArray) {
        $scope.persons = personArray;
        if (personArray != []) {
            $scope.loaded = true;
            $timeout(function () {
                $scope.$apply();
            });
        }
    }

    var errorCallback = function (err) {
        $log.info(err);
    };

});
```
Now I want to replace the table with a jqxGrid, but I can’t get it to load the data from the $scope.persons array. First I tried setting the grid’s ‘source’ to $scope.persons (see the code below), but that didn’t work because the array isn’t loaded until after the grid is created. Then I tried adding a ‘watch’ to the persons array, but that didn’t work either.

Finally I tried using a hard-coded ‘$scope.people’ array as the grid’s source, and that worked. So then I added two buttons to set the grid’s source to these two arrays. I found that if the grid’s initial source is the hard-coded ‘people’ array, then the buttons will swap between the two sources and the grid can show them both. But if the grid’s initial source is the ‘persons’ array from the database, neither button works.
```
// index.html

    <script src="../jqwidgets/jqxcore.js"></script>
    <script src="../jqwidgets/jqxdata.js"></script>
    <script src="../jqwidgets/jqxbuttons.js"></script>
    <script src="../jqwidgets/jqxgrid.js"></script>
    <script src="../jqwidgets/jqxgrid.selection.js"></script>
    <script src="../jqwidgets/jqxgrid.sort.js"></script>
    <script src="../jqwidgets/jqxscrollbar.js"></script>
    <script src="../jqwidgets/jqxbuttons.js"></script>
    <script src="../jqwidgets/jqxangular.js"></script>

	<jqx-grid id="personsGrid" jqx-settings="gridSettings" jqx-watch="persons"></jqx-grid>
	<jqx-button jqx-on-click="loadPersons()">Load Persons</jqx-button>
	<jqx-button jqx-on-click="loadPeople()">Load People</jqx-button>

// app.js

    $scope.loadPersons = function () {
        $scope.gridSettings.source = $scope.persons;
    };

    $scope.people = [
        { name: 'Aaron Smith', initials: 'AS' },
        { name: 'Ben Smith', initials: 'BS' },
        { name: 'Conrad Smith', initials: 'CS' },
    ];

    $scope.loadPeople = function () {
        $scope.gridSettings.source = $scope.people;
    };

    $scope.gridSettings = {
		// source: $scope.persons,   // this line doesn't work at all
        source: $scope.people,      // this line works with the buttons
        altrows: true,
        columns: [
            { text: 'Name', dataField: 'name', width: 230 },
            { text: 'Initials', dataField: 'initials', width: 70 }
        ],
        width: 300,
        height: 300
    };
```
Using the debugger, I verified that the loadPersons() and loadPeople() functions do change the grid’s source. So it’s strange that they only load new data into the grid if it’s initial source is $scope.people?

But that’s of secondary importance. All that I really want is to refresh the grid’s data whenever the $scope.persons array is loaded – after calling the refresh() function in the controller.

I see the grid has a ‘refreshdata’ method. But the example in the documentation requires a reference to the grid via $(‘#jqxGrid’).jqxGrid(‘refreshdata’). In an Angular controller, I don’t think you can reference UI components?

Thanks for your help.
Denis
October 13, 2014 at 6:54 pm Refreshing a Grid in Angular.js #61059

Peter Stoev
Keymaster

Hi Denis,

The AngularJS page describes how to call methods and set properties which means that each property or method which jqxGrid has can be set/get or called using the AngularJS way. Here is a sample which shows how to create a Grid once the data is loaded: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/grid-binding-to-json.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

October 14, 2014 at 7:34 am Refreshing a Grid in Angular.js #61082

denisv
Participant

Thanks for your help, Peter. To trigger a refresh, the main thing I had to do was to use jqx-create=”loaded”, instead of ng-show=”loaded” in my original table.

On the documentation page “jQWidgets Integration with AngularJS”, I see it talks about other special attributes like jqx-watch, jqx-settings, jqx-instance, etc. Are these the only special attributes? If not, do you have a documentation page that defines them all?

Thanks again,
Denis

October 14, 2014 at 10:00 am Refreshing a Grid in Angular.js #61093

Peter Stoev
Keymaster

Hi Denis,

All the settings which we have about AngularJS are documented on that page and/or you can find references in the AngularJS Demo page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.