One of the biggest endeavors that has kept us busy over the past few weeks has been support for AngularJS. Since a lot of you have asked for it, and we are doing conversion work for our customers from Flex to an Angular based platform, this work was high on our priority list, and was quite exciting to do. For those of you who do not know Angular, it is among the most promising JavaScript application development frameworks. It is sponsored by Google, and has been witnessing explosive growth in the Enterprise space, where most of our customers are. For our Flex customers moving to JavaScript, angular will be a breath of fresh air. In fact, the feature set provided by angular are so similar to the Flex features, you would be pleasantly surprised by the number of concepts that Flex had that also exist in Angular. Data Binding, MVVM, Templates, Form Validation, to name a few.

 

There are two key advantages of using Angular directive for HTMLTreeGrid.

 

  • You get to use the excellent modularization of the grid markup, and keep it separate from scripting logic. This makes code organization a lot cleaner, since markup for the grid usually becomes quite verbose, and mixing it with callback functions, event handlers tends to get bulky.
  • You get to define callback functions on your scope, because the scope automatically becomes the delegate for the grid. So the functions need not be added to the flexicious namespace (or have a custom namespace - like myCompanyNameSpace used in many of our examples). For example, you can do something like :$scope.onGridCreationComplete = function (evt), and use it in the markup as  xicreation-complete="onGridCreationComplete", and the scope will be inspected for that function name first.

 

 

The purpose of this blog post is not to go into details of Angular JS, but there are some excellent resources online that do this. There is also a book written by Jeffrey Houser, Life After Flex which is a good read if you are a Flex Developer moving to Angular JS : https://www.lifeafterflex.com/AngularJSForFlexDevelopers/ In this blog post, we are going to focus on the work that we have been doing make use of Angular JS features to make the lives of our customers easier. For Flex developers, the concept of MXML within view is second nature. Angular directives bring this same power to HTML developers. Seeing is believing , so let’s take a look at a quick example of what this means:

Let's quickly look at the steps involved:

  1. Ensure that AngularJs is included
  2. Add HTMLtreeGrid directive after angular-js. This is availalbe here: www.htmltreegrid.com/demo/flexicious/js/htmltreegrid-angular-directive.js
  3. Create an Angular module that depends on treegrid module : angular.module(‘appName’,[‘some dependency’,’other dependency’,’fdGrid’,’more and more’])
  4. Create your controllers and templates and use the fd-grid as attribute like this    <div fd-grid="" ng-model="gridOptions" style="height: 400px;width: 100%;"></div>
  5. Note that ng-model is required and must be not null, and fd-grid is also required but it has no value
  6. In your controller access your $scope and set the what ever model you need and pass it to the grid see the example above  added gridOptions
  7. The grid model should have dataProvider that contains array of data
  8. Each attribute that has multiple upper case (camelcase) should be separated by ( - )  and started with xi like enableMultiColumnSort should be xienable-multi-column-sort
  9. Each tag name that has multiple upper case (camelcase) should be separated by ( - ) - for example : nextLevel should be next-level
  10. For events and function callbacks : With angular, you can still follow the regular mechanism of providing namespaced function callbacks, but there is another option, shoud you choose to use it. You can define the callbacks on the scope itself. The scope becomes the delegate for the grid, and all callbacks are then called on the scope

That said, lets take a look at an example: 

angular.html (3.98 kb)

And here is one with support for hierarchy:

For hierarchical grids, we add a the next-level tag [next-level] after columns. The XML structure would be the same as any of our examples in the demo, just with angular-style property names. 

Index_hierarchy.html (5.49 kb)

Here is an example that shows how to use an item renderer with angular. The concept is the exact same as you would use with the regular jquery edition, except that you can define the reference to the renderer in the grid directive.

angular_itemrenderer.html (8.34 kb)