It is with great pleasure that we would like to announce the general avalability of HTMLTreeGrid version 1.5. This release has a few major enhancements, each with their own respective blog posts, and a list of minor enhancements and bug fixes follows this. If you have a valid subscription to support and updates, please submit a build request. 

Major enhancements:

• Added AutoComplete support to TextInput and for enableFilterAutoComplete.

• Implemented Server based preference persistence
• Implemented Angular-js directives. This adds support for declaring the grid as HTML markup.
• Implemented Inner level filters : This adds support for defining filters on the top level as well as inner levels.
• Sticky headers: This allows you to lock the inner level header rows as you scroll through the child items. More details here. The following properties were added to FlexDataGridColumnLevel for this.
  • enableStickyHeaders: For inner level grids that have their own headers, when the header row scrolls out of view, there is no easy way to determine columns for each row. This flag will make the header row "sticky". For the 3.2 release, this is a beta feature.
  • stickyHeadersAlpha: The alpha to apply to sticky header row.
•  Numerous updates to documentation, and a complete getting started guide added http://htmltreegrid.com/HTMLTreeGridUserGuide.doc

Other Enhancements/Bug Fixes

Enhancements:

1.  Made the TextInput HTML template based. You can set the template by updating the constants class. Default template is :

            Constants.TEMPLATE_TEXTINPUT="<input class='textBox' type='text'/><img class='insideIcon inputIcon'/><img class='outsideIcon inputIcon' style='visibility: hidden' />";

        Please note, the TextInput serves as the base class for DatePicker, as well as MultiSelectComboBox.

2.  Added support for custom header text function for excel export. headerTextForExportFunction. The default function for excel export. By default, we will return the header text. If the parent is a column group, we will concatenate its text to the excel export. headerTextFunction. A function that determines the header text for a column. Should take a column.

3.  Added API to control positioning of the icon for each cell. Added iconPlacementFunction to FlexDataGridColumn. A function that allows you to position the icon when you provide an iconFunction or iconUrl. By default, we use the iconLeft, iconRight, iconTop and iconBottom style properties. However in case of hierarchical grids, you may want to control the positioning of the icon. Takes a FlexDataGridCell object, and an Image object. The image object is already positioned x,y at the result of the calculation based upon iconLeft, Right, Top and Bottom properties for you to make additional adjustments.

4.  Added support for globalFilterMatchFunction : a function to control all the filtering at all levels. If you specify this, all built in filtering mechanics are ignored. This allows you to have full control over filtering.

5.  Added the restrict property to TextInput, this is a validation regex that will allow only the text that matches the regex to be entered into the textinput.

Bug Fixes:

• The Current Quarter date range filter was yielding incorrect results.
• If you pick only the first item in MSCB, it would select all.
• In the TextInput filter if your pressed down on the backspace key and kept it pressed down, after the text being cleared, the filter was not being run.
• Selecting CUSTOM date in the DateComboBox was triggering filter. Now filter will only be triggered on select date in custom popup.
• Event listeners were being added multiple times without a check to see if they already exist once. For grids that are built in response to user interactions, this would cause the listeners to be triggered multiple times.
• Keyboard handling was broken for scrolling through grids with both horizontal and vertical scroll.
• Inner level pager toolbars were being recycled using the top level toolbar, so they had paging buttons when they should not have.
• Preference persistence was not persisting column widths.
• The vertical scrollbar was not adjusting correctly in response to expand/collapse of items in certain circumstances
• The expand collapse icon was appearing for rows that did not have children under certain circumstances.

As most of you know, the HTMLTreeGrid is built on top of well established frameworks. There is a plugin based mechanism that can be used to plugin any framework of choice. We use the framework for a multitude of things, including date pickers, popup windows, and the like. Our plugin based architecture makes it easy to loosely couple the framework from the grid. 

One of our customers wanted to use Bootstrap as their component framework. We developed a BootstrapAdapter as a part of this excercise, which can serve as a good starting point if you wish to plug in any other third party framework. Since this particular customer was using angular-jquery as well, we have some jquery bits in the adapter, but have replaced the datepickers and popups with bootstrap styles.

So this is what it looks like:

And the date picker popup:

Below is the bootstrapadapter used for this:

BootstrapAdapter.js (12.62 kb)

bootstrap-adater-example.zip (5.86 kb)

Flexicious has a robust persistence preference mechanism that "just works" out of the box, but the preferences are stored on the client machine's localstorage by default. This enables the preference persistence mechanism to work without any additional coding on the part of the developers utilizing the library. While this may be sufficient for most people, this will not work in scenarios when the same user uses multiple machines to access your application, or if multiple users access the application using the same machine. For this, you will need to store preferences in the backend, and this post aims to show you how this is done. Attached is a simple example that you can plug into the demo console you got when you downloaded a trial (or purchased a license). 

If you look at ServerPreferencesjs it shows the JS code require to enable server based persistence of preferences: Please note the declaration of the grid - we wire up 3 events, loadPreferences, persistPreferences, and clearPreferences. Each of these events call a service method, which we will talk about in a bit. But the idea is simple, on persistPreferences, we send up the preferences string, the name of the grid, and in your service method, you figure out who the logged in user is (on basis of your security implementation) and store a record in the database with UserID, gridName, and preferences (Make this a large text field (nvarchar(max) in SQL Server Lingo), it could get pretty verbose). the loadPreferences will call your service method to load the preferences you persisted, and set the grids preferences property. Once you set the property, the grid will parse everything and get back to the state it was when the preferences were stored. And then the final method is the clearPreferences, which will basically just wipe out the preferences that were previously stored. Sound like a lot, but really pretty straight forward. In this example, we just store the preferences in a global variable instead of the database. 

This example is integrated with out demo console, but you can clean the concepts from the associated files. To run this example, open the project you got in TreeGridTrial.zip and : 

1)   Add the declaration of the example to the bottom of index.js:

 { id: 'ColumnWidthMode',  description:'This example demonstrates support for various column lock modes, none,fixed,percent,and fitToContent', name:'Column Width Mode',parent:'allExamples',dataProvider:myCompanyNameSpace.Employee.getAllEmployees()},

{ id: 'ServerPreferences',  description:'This example demonstrates Persisting Preferences on the Server', name:'Server Preferences',parent:'allExamples'}

2) Include the script in index.html:

<script type="text/javascript" src="examples/js/samples/ServerPreferences.js" id="script_ServerPreferences"></script>

Once you save preferences and load the example again, you should see:

The files are uploaded for your convenience:

ServerPreferences.js (3.71 kb)

index.js (19.57 kb)

index.html (26.29 kb)

And for those of you who are using ASP.Net/jQuery, below is an ASP.net project that demonstrates how to persist preferences on the server. The example does not actually save it to the database, just puts it in the session memory, and you should be able to adapt the backend code to write to your database engine. 

ServerPreferencesVisualStudio.zip (10.74 kb)

One of the most powerful features of the HTMLTreegrid is the ability to plugin custom, interactive and rich content within each cell of the Grid. And not just that, we enable API hooks for these highly functional components to interact with the grid seamlessly, almost as if they were a part of the grid to begin with. Just scroll down to the bottom of this post and look at the UI, it appears as if the filter picker is an intrinsic part of the grid, where in fact, it is a completely custom plugged in component with rich functionality encapsulated within its bounds. 

In this example, the DynamicFilterControl and DynamicFilterPopup are a custom filter component. If you look at the code for DynamicFilterControl you can see how this gets plugged in. Although this example demonstrates a fairly complicated piece of functionality, the concepts are quite simple - That is the use of renderers to implement custom filter functionality. Most of the code is actually related to implementation of the filter itself.

On running index.html you will see the following screen with "All" option at the top on column. 

On clicking it will show a popup for selecting criteria, select any criteria and click ok to apply on grid. "Remove filter" will remove the criteria. 

DynamicFilter.zip (7.16 kb)

In this blog post, we are going to go over a highly requested feature of the HTMLTreeGrid, the ability to perform searches and highlighting the results. This blog post includes a bunch of files and a novel way to add functoinality to the core product. The prototypical nature of JavaScript OO makes it very easy to add new methods and behaviors to classes, and we do just that in this scenario. We add new methods to FlexDataGrid, and FlexDataGridDataCell classes that allow us to unobtrusively add new features to the core product without even touching the original files! 

Step 1:

First you will need to have a text field, a label for displaying the matched count results and two buttons or images for moving to next and back to result and highlight.

For example you can have a table with these elements in html.

Also we have html grid rendered in following grid container

Step2

In step 2 you need to register handlers to above elements

You can also hide the up and down arrows and set some default text to your results label like we have 

Step 3

Now we are going to implement the change handler for the search text field in change handler we will need to check the number of characters in the search text input, for example we are allowing a user to search for more than 3 characters you can change that according to your requirement. 

We will hide the up and down arrows and clear the text field if we are having less than 3 characters in the search field or when search field is empty

The actual search is performed in key down handler for the search text field. We are checking for the text field character length that is 3 in our case and the enter key down

In the handler first we need to set the global highlight string for the grid component and then get matched objects for the search string.

If matched objects are found then we will call the gotoNextHighlight() method of grid component to highlight the first search string in the grid.

The following code shows the key down handler for search text field.

Similarly on the click handlers of the up and down arrow we need to call the gotoNextHighlight() method of the grid component. Pass “true” to gotoNextHighlight() when moving down and “false” in case of down arrow click

Following screen shot is showing the highlighted search text in html tree grid

The demonstration project files are attached below. The bulk of the codebase is in the new.js class, which basically adds all the new methods to the core product. We are not going to cover the internal implementation details, since this is beyond the scope of this blog post, and requires deep understanding of the HTMLTreeGrid API. Most of our customers however, do not have to worry about this, since we provide the file below to integrate it directly. However, feel free to look at the file to get a better understanding. 

code.js (3.75 kb)

index.html (2.01 kb)

new.js (13.36 kb)

up.png (652.00 bytes)

down.png (673.00 bytes)