Locale based sorting

clock February 19, 2015 15:57 by author htmltreegrid

Recently had a support request:

"We are testing the localization functionality with sorting, and we see it is not working fine. We are testing for Czech Republic and the following is the expected sort order. But it is not sorting as below. Please see the attached video for the non working scenario."

 Czech: a á b e é e f g h ch i í j k l m o ó p q  s š t t u ú u v w x y ý z ž

 The issue is that the default sort has to work across all data types - strings, numbers, dates, etc. This makes it fast, so we can do something like a>b to quickly sort the data. However for localeSensitive sorts, we need to specify a custom sortCompareFunction. This is very easy to do:


myCompanyNameSpace.localeSortCompare=function(itemA, itemB, srt){

       var aVal = (UIUtils.resolveExpression(a, srt.sortColumn));

                            var bVal = (UIUtils.resolveExpression(b, srt.sortColumn));

                            return (aVal.localeCompare(bVal));




And as always, you can wire up the sortFunction like this:

<column id="colId" dataField="id" headerText="ID" filterControl="TextInput" filterWaterMark="Search"'+

    '                                                                                                                                                                   sortCompareFunction="myCompanyNameSpace.localeSortCompare" selectable="true"   filterComparisionType="number"/>'+

Multi Level Child Grids

clock February 4, 2015 14:51 by author htmltreegrid

Recently, a customer came up with an interesting scenario:

In our application we need to show more than one type of child grids(ie child tables with different headers) as details of a single row of a parent grid, and these child grids could also have hierarchical structure. A simple sample structure is given below.

  • Parent Grid(First Level)

    • Row1

      • Child Grid 1 (Second level)

      • Child Grid 2 (Second level)

    • Row2

      • Child Grid 1 (Second level)

      • Child Grid 2 (Second level)

We will be using more complex structure widely in our application and I would like to know how this could be made possible in the current release of the HtmlTreeGrid 

While the current structure (where you specify columns on the level) only allows for one set of columns per parent row, we suggested using the nextLevelRenderer to wrap 2 child grids within it. Inside the setData method of the renderer, initialize the grids. If the grids are already initialized, just update the dataprovider on basis of which row is being shown. Turns out, this is not that hard to do.

See the screenshot below:


The code used to make this happen is below


StandAlone.html (9.46 kb)