If you have looked at our demo page, you already know that HTMLTreeGrid is arguably among the most powerful datagrid options available for JavaScript SPA developers. With our integration with Angular, we expose the power of our product to developers of Angular apps in a way that feels natural.
Angular JS is one of the most widely used framework among our customer base. React is catching up fast, and with Angular 2 being such a major rewrite, things are moving very fast in this arena. We are also working on a React component that wraps the HTMLTreeGrid, but that is a subject for another blog post.
Today, we want to talk about our offering specifically as it relates to angular 1.x.
One of the most powerful features of Angular is the ability to define all markup in the HTML (this becomes your 'view' in MVC). Almost all other third party components that integrate with angular do it in a way that defeats the purpose of Angular's elegance.
For example, you will see them have a directive like this (Note that there is a ton of JavaScript code JUST to do the configuration of the grid - this makes it a lot harder to understand the HTML markup and how it relates to the actual grid structure):
<!--THIS PART GOES SOMEWHERE BURIED IN YOUR VIEW HIERARCY-->
<div ng-app="app" ng-controller="MyCtrl">
<div third-party--grid-component component-options="componentOptions" />
</div>
<!--THIS PART GOES SOMEWHERE BURIED IN YOUR SCRIPTS-->
<script>
angular.module("app", [ "thirdPartyDirective" ]).controller("MyCtrl", function($scope) {
$scope.componentOptions = {
gridOption1 : "val1",
gridOption2 : "val2",
gridOption3 : "val3",
columns : [
{
columnOption1 : "val1",
columnOption2 : "val2",
columnOption3 : "val3",
},
{
columnOption1 : "val1",
columnOption2 : "val2",
columnOption3 : "val3",
}
]
};
});
</script>
Now contrast this with our Angular Datagrid declaration
<html>
<body> ..rest of the html
<div id="gridContainer" fd-grid="" ng-model="gridOptions" style="height: 725px;width: 100%;"...>
<level xirow-Height="49">
<columns>
<column xidata-Field="id" xiheader-Text="ID" xicolumn-Width-Mode="fixed" xiwidth="150" />
<column xidata-Field="City Name" xiheader-Text="City Name" />
</columns>
</level>
</div>
... rest of the html
Do you see the difference? Our Angular markup is clean, self contained, and requires very little JavaScript -
everything is loaded straight from the view which makes Clear separation of presentation and logic possible.
Another nice thing about our product is we hate to 'reinvent the wheel'.
We rely on well established frameworks, plugins, and libraries that our customers are already using.
For example, all of our UI is built using either jQuery UI, EXT, or DOJO
in a plugin mechansim - (which allowed us to recently and quite easily add integration with Bootstrap).
If you like what you see, feel free to check out a few examples that use our AngularJS integration directive :
http://blog.htmltreegrid.com/post/Angular-JS-Support.aspx