Introduction To HTMLTreeGrid

The HTMLTreeGrid is a Jquery, EXTJS and DOJO based TreeGrid component designed to render highly complex, Hierarchical/Nested as well as Flat Data in Line Of Business RIA applications. Out of the Box, it enables you to leverage a vast spectrum of features, like Inline Filters, Summary Footers, Fully Customizable Server/Client Paging, DataGrid Print, Excel Export, Word Export, and User Settings Persistence, Smooth Scroll, Nested hierarchical Tree/Child grids, Right Locked columns, and built in Lazy Load support. It is built in support for numerous use cases and scenarios. It has support for flat as well as rich support for various forms of nested and hierarchical data, including columns per level, tree based grids as well as nested/sub grids, inline detail panels within grid rows, and more. It Ships with 10 professional, easily customizable themes.

Introduction

The HTMLTreeGrid is a JavaScript port of the Flexicious ultimate DataGrid, which is the most powerful DataGrid component available for flex application development. For those of you who are not familiar with flex, Flex is a highly productive, open source application framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and devices. It provides a modern, standards-based language and programming model that supports common design patterns suitable for developers from many backgrounds.

Why HTMLTreeGrid?

Built on the shoulders of giants: There is a flavor of the HTMLTreeGrid built on top of the excellent JQuery, DOJO, and EXT-JS libraries/frameworks. HTMLTreeGrid leverages the underlying framework for a lot of things like dialog boxes, date pickers, item editors, as well as core concepts like component lifecycle management, display list management, event handling framework, and more. By leveraging the framework features for a lot of these dependencies, not only do we reduce the footprint of our CodeBase, but also make it easier for our customers to integrate our product into their systems, while at the same time benefiting from the many man months of effort that goes into developing these framework pieces.

A Feature set unmatched by any: Although these frameworks offer a DataGrid component of their own, none of the available DataGrid components offer all the features that are available in the HTMLTreeGrid in a unified API. The HTMLTreeGrid was specifically designed to handle very complex use cases that involve hierarchical data as well as complex interactions you can perform with such data sets. Some of the examples of such interactions include lazy loading child records that each hierarchical level, recursive selection, selection cascading and bubbling, virtual scroll, built-in support for drill up and drill down, built in support for in-line detail panels, in addition to integrating with regular DataGrid features like in-line filtering, paging, multiple columns sort, grouped as well as left and right locked columns, row span and column span, a number of selection modes like cell, row , multiple cell, multiple row, as well as customizable programmatic cell backgrounds contents borders and colors. The complete list of features is way too long to cover in this single blog post so please look at the features and the demos to get an idea of what's possible.

Highly Optimized: Rendering complex component inside flash player is significantly more resource intensive than rendering a similar amount of DOM Elements or table cells in a browser. Consequently the code that HTMLTreeGrid is based upon is significantly more optimized than some of its counterparts primarily because it has to function inside the flash player VM and perform well. This is why we have gone to great lengths to optimize every single piece of the rendering mechanism. We recycle renderers as you scroll in both directions horizontal as well as vertical. We draw just the visible area for all the sections of the DataGrid including headers footers filters the toolbar as well as the data area. This makes it possible for us to render very large record sets in a very short period of time.

Enterprise Ready, Proven, and Robust: Since the HTMLTreeGrid has its roots in the Flexicious ultimate flex DataGrid, it automatically inherits years and years of development, testing, refining as well as the level of robustness that comes from being used in the most demanding enterprise applications ever built. For years flex has been the application development framework of choice for large organizations especially with the Java J2EE stack. There is good reason for it, because a number of the concepts that have been developed in the flex ecosystem make it a very attractive option as the UI technology of choice for large-scale applications. HTMLTreeGrid benefits from inheriting all of these underlying concepts that are baked into its architecture.

Laser Sharp Focus: As a company, we have been making a living for years by providing our customers with the most powerful Flex DataGrid component money can buy. Today we are bringing that same level of polish to flex developers moving to JavaScript as well as JavaScript developers in general. We have a team of very talented developers and designers who have thought about the DataGrid component more than what should be considered healthy. We have pondered over use cases, argued over user interaction schematics, listened to our customers, refined and improved our product on basis of what their requirements are,  and relentlessly refactored, redesigned and redeveloped features until they achieve perfection. We're committed to constantly improving our product in pursuit of the highest level of quality.

Below is a screenshot of the HTMLTreeGrid running inside a DOJO application. You can find out more information about HTMLTreegrid at HTMLTREEGRID.COM

For those of our customers who are coming to us from a flex background, we welcome you to the world of JavaScript and hope to make the transition as seamless and effortless as possible. For those of our customers who are coming to us from a pure JavaScript background, we invite you to see what you've been missing in the wonderful world of flex development. With HTMLTreeGrid, we are bringing together the best of both worlds in one package.