HTML TreeGrid v3.0 is out

clock January 16, 2018 15:37 by author htmltreegrid


2017 was a busy year for us, and below are some of the things we accomplished (These are just the highlights):

Our latest release of all our products (Flex,HTML,iOS, Android, React, WebComponents) has a big improvement – much smoother horizontal scrolling.  We’ve made a significant change in how we do renderer recycling across all our products. We already had this approach working with vertical scrolling for a while now, and we finally ported it to horizontal scrolling as well. For most grids the difference will be minor – but if you have grids with a very large number of columns, and especially if your cells have a lot of styling (colors, background colors, etc) you should see visible performance gains.

For our HTML customers, we've made the following enhancements:

Support for Angular 5. As most of you are aware, we already integrate with AngularJS as we talked about in this blog post : . With our latest release, we have added support for Angular 5:


Introduction of a Pure Native React DataGrid:

React has for a while been now gaining momentum, and some would argue is on track to bypass angular in terms of popularity. For those of our customers who have chosen to go with react, We released a native React based datagrid component. Its already on version 1.7 and is constantly getting better.


WebComponents: In addition to React and Angular, WebComponents is gaining a lot of momentum because its built on open standards and as browsers evolve, will be supported fully natively without the need for a third party framework like React or Angular. This is one of the reasons some of our largest Enterprise customers are investing in this technology and we are partnering with them to ensure our product is available to them in that ecosystem. A lot of the work is available on github  


More importantly, we’ve grown more from a pure product company to a consulting organization. We now have dozens of people working on projects that use our products for a number of customers. For Flex, HTML (Angular, React, Web Components), Android, as well as iOS. This helps us continuously improve our products as well as assist customers with their unique requirements. Since the datagrid component is at the heart of most business applications, we’re uniquely positioned to assist our customers develop applications faster and better than most other consulting companies. To find out how we can help you jumpstart your project, contact us today!

Below are some additional changes introduced as a part of this release.


1.     Added MultiSelectComboBox Popup scrollable container with minHeight 250px.

2.     Fixed UIUtils#attachClass domElement className NullException.

3.     Added RowInfo#refreshCells

4.     Added border for last column in a columnGroup.

5.     PageFooter, PageHeader, PagePreview, PrintHeader, PrintFooter directly extends from UIComponent.

6.     Removed Arrow Navigator to columngroup cells.

7.     Enhanced drag-n-drop.

8.     Added enableHeaders as  FDG Level property. (default => true)

9.     Added showTooltip (=false), columnWidthModeFitToContentWidthCalculator (=null) as FDG Column property.

10.  There no more static_dataCellRenderer as default cell renderer.

11.  Added destroyEditorOnMouseDownOnGrid (=true),  enableBody (= true), enableColumnGroupSeparators (=true), columnGroupSeparatorColor (=0x3c3c3c) , columnGroupSeparatorThickness(=2),  enableDeferredScrolling (=false),  enableSuspendPaintWhileScrolling (=false), destroyEditorOnMouseDownOutsideEditor (=true) ,

ControlClickMultiColumnsSort (=false), enableDoubleClickOnEditableCell(=false), doubleClickTimerDuration(=250ms)  as property,                                    

SCROLLCOMPLETE, FlexDataGrid.EVENT_ITEMRIGHTCLICK, FlexDataGridEvent.ITEM_EDIT_CANCELING as event listener,    sortIconPlacementFunction, sortPlacementFunction, expandCollapseIconDrawFunction as callback, getVerticalScrollPolicy() method to FDG.


12.  Added capability to parse Grid configuration from JSON.

13.  Prevent Arrow Key handler in filter Container.

14.  Added FlexDataGrid# throttle.

15.  Enhanced FDG DataCell and implemented FDG DataCell3 for performance optimization

16.   Added UIComponent.pauseMouseEvents, UIComponent#setTextDeferred

17.  Added LabelFunction callback to MSCB.

18.  Simple example modified as Grid Json configuration instead of XML configuration.

19.  Added Exporter ->FileSaver functionality.

20.  ExportOptions has no default echoUrl anymore.

21.   Added MultiSelectComboBoxEx

22.  Fixes for MSCB [NONE] items.

23.  Fixed DateComboBox custom date selector two time click issue in Safari/Chrome in Mac.

24.  Fixed MSCB scroll problem in Thinkpad.

25.  Enhanced FDG#trackChanges implementation.

26.  Enhanced RendererCache to optimize FDG performance.

27.  Fixes for sort with null or undefined or NaN for numeric sort.

28.  Fix for when you scroll down, swap out the dataprovider.

29.  Enhanced FDG ContainerBase to restore old data on press escape.

30.  Modified FlexDataGridContainerBase for trackchanges on press escape.

31.  Fixes restore headerbackgroundcolor on drag end.

32.  On editing, null values are not being applied for complex fields.

33.  Added click event listener to sort-icon.

Angular 5 DataGrid support

clock January 7, 2018 20:07 by author htmltreegrid

As most of you are aware, we have supported Angular for a longtime:

Here are a couple blog posts in regards to our support:

With Angular 5, the team changed a few things around how the directives are wired. Below, please find attached a sample project that runs angular 5. (268.12 kb)

Here is a more complete example, with a backend mock service call: 

Adding HTML characters in cells

clock April 27, 2017 19:40 by author htmltreegrid

As most of you know, the HTML TreeGrid allows you to embed custom HTML content within the cells in a very conveinient manner. This can be just pure HTML, or interactive HTML as described in this blog post:

What this allows you to do, is to return any HTML in string format and the grid will render it in the cells. With this convenience, comes a limitation - if you have special characters you want to render, they get converted to HTML and are not rendered as text. Today, a customer reached out with a query about how to handle scenarios where you want to show special characters but not render any custom HTML. The solution is to use a special item renderer:

(function () {

    "use strict";

    var EncodedItemRenderer;

    EncodedItemRenderer = function (tag) {


        flexiciousNmsp.Label.apply(this, [tag]);


    flexiciousNmsp.EncodedItemRenderer = EncodedItemRenderer; //add to name space

    EncodedItemRenderer.prototype = new flexiciousNmsp.Label(); //setup hierarchy

    EncodedItemRenderer.prototype.typeName = EncodedItemRenderer.typeName = "EncodedItemRenderer";//for quick inspection

    EncodedItemRenderer.prototype.getClassNames = function () { //for support of "is" keyword

        return ["UIComponent", this.typeName];


    EncodedItemRenderer.prototype.setText = function (val) {

             this.domElement.textContent = val;





And attached is a running example:


test.html (4.51 kb)

Best WebComponents DataGrid DataTable

clock March 13, 2017 02:04 by author htmltreegrid

We're please to announce the general release of the WebComponents wrapper for our powerful HTML DataGrid.

With this, we now support the following technologies:

React: [Pure React DataGrid]

Angular 1:

Angular 2 (&4):


Web Components:

In this post, we are going to look at how to integrate the webcomponents wrapper for HTML Datagrid.


* git checkout
* bower install
* Place your licensed copy of html treegrid (v 3.xx) in lib_private 

In your head section:
    <script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="./bower_components/polymer/polymer.html">
    <link rel="import" href="src/flxs-webcomponents-data-grid.html" />
    <link rel="import" href="src/flxs-webcomponents-data-grid-column.html" />
    <link rel="stylesheet" href="" type="text/css" />
And then in your body section:
    <template id="tpl" is="dom-bind">
        <flxs-webcomponents-data-grid dataProvider="{{ donuts }}" forcePagerRow="true" enablePaging="true" enableExport="true" style="width:800px;height:400px"
            <flxs-webcomponents-data-grid-column type="checkbox"></flxs-webcomponents-data-grid-column>
            <flxs-webcomponents-data-grid-column dataField="id" headerText="ID" filterComboBoxDataProvider="{{donuts}}"></flxs-webcomponents-data-grid-column>
            <flxs-webcomponents-data-grid-column dataField="type" headerText="Type"></flxs-webcomponents-data-grid-column>
 And then in your script section:
         var donuts = [
                            { "id":"5001", "type":"None None None" },
                            { "id":"5002", "type":"Glazed" },
                            { "id":"5005", "type":"Sugar" },
                            { "id":"5007", "type":"Powdered Sugar" },
                            { "id":"5006", "type":"Chocolate with Sprinkles" },
                            { "id":"5003", "type":"Chocolate" },
                            { "id":"5004", "type":"Maple" }
    window.addEventListener('dom-change', function () {
      var tpl = document.getElementById('tpl');
      tpl.donuts = donuts;
      tpl.creationComplete =  function(evt){
            alert("Created " +


Angular 2 HTML TreeGrid

clock February 25, 2017 20:13 by author htmltreegrid

As most of you are aware, we have supported Angular for a longtime:

Here are a couple blog posts in regards to our Angular 1.x support:

We had Angular 2 support built a few months ago, and have been trying it out with some of our customers. With the release of Angular 4, this same approach will continue to work.

So, without further ado, here are the steps you will need:


  • 1- Import the directive import {TreeGridDirective} from './treeGrid.directive'
  • 2- List it in the directive list inside your component directives: [TreeGridDirective]
  • 3- Create a bindable property that can be bound to your template  gridOptions = {    dataProvider: [],   delegate: this }
  • 4- In your template use directive like this: <div fd-grid ...
  • 5- Bind your option similar to our angular 1 directive
  • 6- Bind the grid options like [(model)]="gridOptions" 
Below, is a full example of this approach. 
To run this example,
  • 1) create a folder and unzip the zip file below into that folder
  • 2) npm install
  • 3) npm start (269.62 kb)

Programatically control cell borders in HTML DataGrid

clock January 17, 2017 23:52 by author htmltreegrid

Example attached:

Use of cellBorderFunction and iconClick

levelsAndIconClick.html (6.01 kb)

Export Timing out issue

clock October 31, 2016 01:05 by author htmltreegrid

Recently had an issue reported by a long time customer. 



While using Export to excel in Htmltreegrid, We have implemented “Excel2007” option  to export gridData in “.xls” format.

We are implementing this using Excel2007Exporter.js file(see attached) and added following code in our controller file in onGridCreationComplete function.


$scope.onGridCreationComplete = function(evt) {

                                                                                                                                var grid =;

                                                                                                                                grid.excelOptions.exporters = exporters = [new flexiciousNmsp.CsvExporter(), new flexiciousNmsp.DocExporter(),

                                                                                                                                new flexiciousNmsp.HtmlExporter(),new flexiciousNmsp.XmlExporter(),new flexiciousNmsp.TxtExporter(),

                                                                                                                                 new flexiciousNmsp.Excel2007Exporter()








But while Exporting the data of the grid which is having more than large records(1000+ records), It redirects  to Flexicious homepage and shows error message whithout generating excel.


Please suggest on this.


Answer :

This customer was using sample code from an old version of the product that did not have support for file saver. It was using the flexicious server echo. When you do a export , we basically build a string on the client application. If Flash player is available, we will use it via the downloadify library. If not, we need to go through the traditional http File Buffering process. So what we do is this : We build the excel/word/html string, and send it to the server, which simply writes it back, in addition to setting the content type. Now, we advise that you implement your own url to buffer this string back, but do provide our own url - the one mentioned above to perform the buffering. There is more information here : 

However, with the newer versions, we have added support for file saver. On modern browsers, you can do file save without the need for having flash. So the download mechanism will check to see if filesaver exists and is supported, if so, will use that. If it is not there or is not supported, it will fall back to flash. All you have to do is to use the new release and include FileSaver.js. If you include our PDF support, FileSaver is automatically included.

<script type="text/javascript" src=""></script>

You can also import filesaver independently: 

Complete working example below: (2.74 kb)

Copy Cell Issue with custom HTML in cells

clock October 5, 2016 03:57 by author htmltreegrid

As most of you know, the grid provides an extremely convenient mechanism to write out custom HTML in cells, labelFunction and labelFunction2. This gives you complete control over what html you want to appear within each cell. However, with this flexibility comes a little bit of a issue in that the same code is executed when the grid renders the cell, or the cell export or copy mechanism inspect the cells to figure out the text to export or to copy. 

One of our customers was trying to implement the copy cell functionality described in this blog post: 

However, when they had custom HTML in the cell, there were two issues they encountered:

1.       While using label-Function2, and try to use this Copy cell it is giving below error, And it is not doing anything :

minified-compiled-jquery.js:1300 Uncaught TypeError: Cannot read property 'implementsOrExtends' of null

2.       While using Copy Table functionality, It is giving below error, And it is not doing anything:

minified-compiled-jquery.js:472 Uncaught ReferenceError: isIncludedInExport is not defined


 In In a nutshell, the problem is this - when you do copy cell, we need to identify which cell your mouse is on. We use the mouse event target to find out which FlexDataGridCell object the mouse event dom element belongs to. In this case, since we have custom HTML within the cell, we need to navigate to the DIV domelement first and then use that to get to the FlexDataGridCell object. Attached is a working test case that demonstrates fix for the above issue. (8.44 kb)

Some Recent FAQs

clock October 4, 2016 06:07 by author htmltreegrid

Recently had a couple interesting questions:

Question : I am using flexicious HTMLTree grid in one of my project and I am not able to figure how to retrieve filtered rows anytime on grid. I need all rows which are actually filtered and not just rows appearing on screen at any instant. Please let me know how can I achieve that and it will great if you could share sample example of it.

Answer :   var filterData = grid.getFilteredPagedSortedData({},true,false,false,false);


Question : We are using HTMLTreeGrid with angularJS.  In our applications we have added buttons to our grid using the ToolBarActions but need more control when to enable a button than simply saying a row has been picked at a level.  For example, we only want to enable the button based on data in the selected row.  Is that possible?  Can you send an example how to do this?  Or do we need to create a Custom PagerControl to do this?  And how easy is it to extend the PagerControl to additional functions?

It is very easy to extend the pager control:

The toolbar actions are built within the pager control. You can do something like this:


Here is the default implementation:

 * Evaluates whether the given toolbar action is valid or not.
 * If toolbarActionValidFunction is not null, returns the result of the function passing in the given ToolbarAction.
 * Else returns true.
 * @method isToolbarActionValid
isToolbarActionValid = function (action, currentTarget, extendedPager) {
    if (action.requiresSingleSelection) {
        if (this.getSelectedKeys().length == 1) {
            var appliesToLevel = action.level;
            var itemLvl = this.getLevelForItem(this.getSelectedObjects()[0]);
            if (appliesToLevel == -1 || (itemLvl && (itemLvl.getNestDepth() == appliesToLevel)))
                return true;
                return false;
        return false;
    } else if (action.requiresSelection) {
        return this.getSelectedKeys().length > 0;
    return true;
Finally, two attached examples demonstrate how to accomplish this with Angular JS:

angular (1).html (5.12 kb)

Index_hierarchy.html (6.24 kb)

And can you explain how to set the grid so picking a top level row does not automatically pick all nested next levels rows?  We can pick a row from the next level row and it does not auto pick the parent row.  We need the user to explicitly pick the nested rows even when the parent row is selected.


è     Just set enableSelectionCascade to false. 

How to use third party components in HTMLTreeGrid

clock July 5, 2016 07:06 by author htmltreegrid

This is a question that has come up before, and its a hard one to answer. As you are aware, we provide API hooks to give you complete control over the contents of each cell. There are some easy way to do this - for example, you can simply return some custom HTML in a labelFunction, and even make it interactive, like we show in this blog post: 

However, the question becomes, how about when you have to use custom third party components. While we cannot guarantee the product will work with every single third party component, nor can we offer support for components that we have not authored, we certainly can show you how this can be done with a sample component. For this example, we are going to use the powerful and very popular select2 jquery auto complete component. 

Let's dive into the code:

* Flexicious
* Copyright 2011, Flexicious LLC
"use strict";
var AutoCompleteRenderer, uiUtil = flexiciousNmsp.UIUtils, flxConstants = flexiciousNmsp.Constants;
* A CheckBoxRenderer is a custom item renderer, that defines how to use custom cells with logic that you can control
* @constructor
* @namespace flexiciousNmsp
* @extends UIComponent
//make sure to call constructor
flexiciousNmsp.UIComponent.apply(this,["div"]);//second parameter is the tag name for the dom element.

var html='<select class="js-example-basic-single"> <option value="AL">Alabama</option><option value="AL">Alaska</option><option value="CO">Colorado</option></select>';
this.domElement.innerHTML=html; = this.domElement.firstChild;
var $eventSelect =$(;
$eventSelect.on("change", this.onChange.bind(this));

* This is a getter/setter for the data property. When the cell is created, it belongs to a row
* The data property points to the item in the grids dataprovider that is being rendered by this cell.
* @type {*}

flexiciousNmsp.ItemRenderers_AutoCompleteRenderer = AutoCompleteRenderer; //add to name space
AutoCompleteRenderer.prototype = new flexiciousNmsp.UIComponent(); //setup hierarchy
AutoCompleteRenderer.prototype.typeName = AutoCompleteRenderer.typeName = 'AutoCompleteRenderer';//for quick inspection
return ["AutoCompleteRenderer","UIComponent"]; //this is a mechanism to replicate the "is" and "as" keywords of most other OO programming languages

* This is important, because the grid looks for a "setData" method on the renderer.
* In here, we intercept the call to setData, and inject our logic to populate the text input.
* @param val
var cell = this.parent; //this is an instance of FlexDataGridDataCell (For data rows)
var column = cell.getColumn();//this is an instance of FlexDataGridColumn.
* This event is dispatched when the user clicks on the icon. The event is actually a flexicious event, and has a trigger event
* property that points back to the original domEvent.
* @param evt

//in the renderer, you have the handle to the cell that the renderer belongs to, via the this.parent property that you inherit from flexiciousNmsp.UIComponent.

var cell = this.parent; //this is an instance of FlexDataGridDataCell (For data rows)
var column = cell.getColumn();//this is an instance of FlexDataGridColumn.
console.log('setting value to' +[column.getDataField()];//we use the dom element to wire back the value to the data object.
//This sets the inner html, and grid will try to set it. Since we are an input field, IE 8 will complain. So we ignore it since we dont need it anyway.


We are defining an itemRenderer here, that simply wraps a select2 component. In its constructor, we initalize it.
In the set data method, we populate it. And we listen for its change event, where we write the data back to the 
data provider.
Below is the complete running example:

third-party-item-renderer.html (7.22 kb)


And this is what this will look like: