One of the strongest selling points of HTMLTreeGrid is the ability to work with its extensive API. We designed the product to be extremely developer friendly, and since it has grown from years of experience a lot of thought has gone into making it possible for you to customize its behavior, and program logic around its features. Event Handlers and Function Callbacks are a prime example of this paradigm.

The grid, at various points in its lifecycle dispatches events. These are quite similar to HTML Dom events, and if you are coming to HTMLTreegrid from our other products should be quite straight forward to you conceptually. Even if you are new to HTMLTreeGrid in theory, it is quite simple to grasp. Something of interest happens, an event is dispatched. Anyone interested in these events can listen for them. There are different points in the grids lifecycle that it will dispatch these events, from initialization, to dataProviderSet, to rendered, to mouse interactions like mouseover, mouse out, item click, edit begin, edit end, etc.. Let’s take a look at a quick example. Pay close attention to the markup in yellow highlight.

Lets take a quick look at an example

        $(document).ready(function () {

            myCompanyNameSpace.onChange = function (evt) {

                var grid = evt.target;

                var selectedItems = grid.getSelectedObjects();

                alert("selected objects: " + flexiciousNmsp.UIUtils.extractPropertyValues(selectedItems,"id"));

            }

            myCompanyNameSpace.onItemClick = function (evt) {

                var grid = evt.target;

                alert('You clicked on ' + evt.item.id);

            }

            var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),

                    {

                        configuration: '<grid id="grid" itemClick="myCompanyNameSpace.onItemClick" change="myCompanyNameSpace.onChange"

...

This should show you :

In this example we just wired up a couple events, itemClick and change. Although they are not related, but they notify you of two different things, one that the user clicked on a row and the second that the selection of the grid has changed. Another important point to notice, is that the functions that are defined as the call backs, are defined under the “myCompanyNameSpace”. This way, all your callbacks can be defined in a way that is accessible to the grid as it navigates through the markup XML. The same concept is used for itemRenderers (which point to functions that are classes), and call back functions that we cover later in this chapter. These are just a couple examples of a very rich set of events and notifications that the grid knows to dispatch

A Full list of these events can be found on our docs: Some of these events are also dispatched by the Column and the Level, and you can review the entire list of events in the docs. http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGrid.html http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGridColumn.html http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGridColumnLevel.html All of these event names can be used in the configuration XML. Note, that the callback handler usually gets an event object, which contains a lot more information about the specific type of the event being dispatched.

Function Callbacks:

In addition to events, there are a number of API variables that are of type Function. This basically means that you can provide a function that executes your own logic. These differ from events primarily in the fact that the grid is asking something of you instead of just notifying you that something happened. For example, there is a function callback, cellBackgroundColorFunction that will pass you a cell, and expect a return value of a color, that you can then use to execute custom logic to provide the background color for the cells. Let’s take a quick look at an example:

myCompanyNameSpace.getCellBackground = function (cell) {

                if (!cell.getRowInfo().getIsDataRow()) {

                    return null;

                }

                if (cell.getColumn().getDataField() == "type") {

                    return 0x0000ff;

                } else if (cell.getRowInfo().getData().type == "Glazed") {

                    return 0x00ff00;

                }

                return null; //this makes the grid use whatever color it would have by default.

            }

            var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),

                    {

                        configuration: '<grid id="grid" itemClick="myCompanyNameSpace.onItemClick" change="myCompanyNameSpace.onSelectAll" cellBackgroundColorFunction="myCompanyNameSpace.getCellBackground"

This gives you:

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)