Using Wijgrid with Angular JS

  • 0 Comments

Wijmo supports AngularJS, a lightweight MVC JavaScript framework, allowing you to easily create and maintain a dynamically changing UI. You can use AngularJS in addition to jQuery to enhance your pages with an underlying data model. This blog demonstrates how you can use Wijgrid and handle its event/properties with AngularJS. First of all, you need to add the references of Wijmo from the CDN link. After this, you can create a model and a controller like this: 

// when document loads, create ViewModel, and apply bindings  
//Person class  
function Person(data) {  
  this.ID = data.ID;  
  this.Company = data.Company;  
  this.Name = data.Name;  
  this.Sales = data.Sales;  
};  

//Create ViewModel  
function ViewModel($scope, $locale) {  
   $scope.list = [  
       new Person({ ID: "ANATR", Company: "Ana Trujillo Emparedados y helados", Name: "Ana Trujillo", Sales: 8900 }),  
       new Person({ ID: "ANTON", Company: "Antonio Moreno Taqueria", Name: "Antonio Moreno", Sales: 4500 }),  
       new Person({ ID: "AROUT", Company: "Around the Horn", Name: "Thomas Hardy", Sales: 7600 }),  
       new Person({ ID: "BERGS", Company: "Berglunds snabbkop", Name: "Christina Berglund", Sales: 3200 }),  
       new Person({ ID: "BLONP", Company: "Blondel père et fils", Name: "Frédérique Citeaux", Sales: 4100 }),  
       new Person({ ID: "BOLID", Company: "Bólido Comidas preparadas", Name: "Martín Sommer", Sales: 3000 }),  
       new Person({ ID: "DUMON", Company: "Du monde entier", Name: "Janine Labrune", Sales: 4710 }),  
       new Person({ ID: "EASTC",  Company: "Eastern Connection", Name: "Ann Devon", Sales: 2900 }),  
       new Person({ ID: "ERNSH", Company: "Ernst Handel", Name: "Roland Mendel", Sales: 7020 }),  
       new Person({ ID: "FISSA", Company: "Familia Arquibaldo", Name: "Salchichas", Sales: 4280 }),  
       new Person({ ID: "BONAP", Company: "Bon app", Name: "Pedro Afonso", Sales: 1900 })  
    ];  
  }

Whenever we are using Angular JS, we need to define the document as an Angular app and it can be done by adding a ng-app attribute in the HTML tag i.e. 

 <html ng-app="wijmo">

After this, we must define the scope our Controller to a DOM element. In this case we will use the body so that anything inside of it will have access to the Model: 

 <body ng-controller="ViewModel">

Finally, the markup used to create the Wijgrid widget is slighltly different from the default markup in terms of syntax. The code will look like: 

 <wijgrid id="dataGrid" data="{{list}}" allowediting="true" showfooter="true" style="width: 600px;" currentCellChanging="currentCellChanging">  
    <columns>  
       <column headerText="Company ID" width="150"></column>  
       <column width="200"></column>  
       <column headerText="Owner Name"></column>  
       <column aggregate="sum" footertext="<u>sum</u>=<b>{0}</b>" dataType="currency"></column>  
     </columns>  
 </wijgrid>

In the above code, you will observe that properties of Wijgrid or its columns are defined like the way, we use in ASP.NET server controls. For complete tutorial, you may refer to this link. Event Handling Whenever you wish to handle any event of Wijgrid then make sure that it is in the scope. And you can directly set the function name to the event as done in above code. You can define the event as: 

$scope.currentCellChanging = function (e, args) {  
    var col = args.cellIndex;  
    var row = args.rowIndex;  
    alert("Selected Row: " + row);  
};

Please refer to this sample for complete implementation. To read more on using Wijmo with AngularJS, you may refer to this blog.

MESCIUS inc.