SpreadJS Paging Using AngularJS

  • 0 Comments

We can use the Wijmo DataView source (which implements the IDataView interface) to implement paging, filtering, and sorting functions. You may refer to the following link which describes the same. This article describes how you can implement paging in SpreadJS, when it is created using AngularJS. We would need to use ArrayDataView to implement paging in SpreadJS. The controller would create a new ArrayDataView instance that would act as datasource for SpreadJS. Here we would even define the functions to navigate to previous or next page and even clear paging. Here is the code: 

function ssCtrl($scope, $routeParams) {       var datasource = new wijmo.data.ArrayDataView(sourceData(), { pageSize: 10 });       datasource.refresh();       $scope.products = datasource.toObservableArray();       $scope.prevPage = function () {           datasource.prevPage();       };       $scope.nextPage = function () {          datasource.nextPage();       };       $scope.clearPage = function () {          datasource.pageSize(0);       };   }

Finally, bind the controller to SpreadJS to display the data and perform page navigation using the functions defined above. Here is the code: 

<wij-spread id="ss" usewijmotheme="true" newtabvisible="false" style="width:500px;height:400px">     <sheets>         <sheet datasource="products" name="Product">         <columns>             <column datafield="Product\_ID" headertext="ID"></column>             <column datafield="Product\_Name" headertext="Product name"></column>             <column datafield="Category\_ID" headertext="Category ID"></column>             <column datafield="Unit\_Price" headertext="Price"></column>         </columns>         </sheet>     </sheets> </wij-spread>

Download the attached sample which implements the above code.

MESCIUS inc.