Introduction

Note: You can skip this section and get directly to the "Getting Started - Simple Example" topic if you are familiar with our Flex Products.

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?

HTMLTreeGrid is 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 life-cycle 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 Code base, 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 post so please look at the features and the demos to get an idea of what's possible.

Highly Optimized: 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 re-factored, 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 are some of the features of the grid, with new ones being added with each release.

FEATURES

• Basic DataGrid Features : Ability to organize information as rows and columns, with locked headers, Ability to Customize the appearance Rows and Columns, User Interactive, Draggable, Resizable, Sortable and Editable Columns, Keyboard Navigation and Accessibility Support.
• In-line Filtering, with numerous built in Filter Controls, and extensible architecture to define your own.
• Server and Client Paging, with a fully Customizable Pager UI.
• Summary Footers, with fine-tuned control over Formula, Precision, Formatting, Placement and Rendering of Footers.
• Ability to Export to Excel, Word, Text, XML and other formats. Ability to plug in your own Exporters.
• Preference Persistence (Ability for your end users to save viewing preferences, like column order, visibility, widths, filter criteria, print settings etc.)
• Support for Hierarchical Data with Smooth Scrolling and Nested Tree Grids
• Ability to define Fully Lazy Loaded, Partially Lazy Loaded and Initial Loaded Flat as well as Hierarchical Data Grids.
• Support for Row Span and Column Span.
• Support for Virtual Scroll of Hierarchical Data.
• A vast number of Business Scenarios supported out of the box:
• Fully Configurable Drag and Drop
• Multi Column Sort
• Multi-Level, Grouped Column Headers
• Single Cell, Single Row, Multiple Cell, Multiple Row Selection Modes.
• Display of Homogeneous Hierarchical Data (Single Set Of Columns)
• Checkbox Selection of data, with Tri State Checkbox Header
• Customizable Loading Animation
• Smooth Scrolling
• Display of Heterogeneous Hierarchical Data (Multiple Sets Of Columns)
• Display of Heterogeneous Hierarchical Data (Multiple Sets Of Columns)
• Ability to define paging, filtering and summary footers at each hierarchical level
• Left and Right Locked columns
• Built in Cascading and Bubbling of checkbox/row selection for hierarchical data
• Built in Drill Down/Drill Up/Drill to of Hierarchical data
• Toolbar action icons, with ability to define custom actions
• Built in Ability to define initial sort values at any level
• Built in Ability to show custom ToolTip with interactive content on hover over
• Built in Ability to define custom logic that controls row selection, enabled, background, and border.
• Built in Ability to Auto Adjust height based on rows, as well as prevent multiple scrollbars at hierarchical levels.
• Programmatic control over which cells are editable, which rows are selectable, background, border and text colors of each cell.
• Read write nested properties of complex objects
• Context menu based copying of data rows
• Ability to declaratively define Hand Cursors, Underline, truncateToFit, wordWrap on the columns
• Ability to define various column width modes, like fitToContent, Percentage and Fixed, Automatic column width adjustment on basis of data