Readers of our blog know that the past few weeks have seen tremendous development activity on the product. The upcoming 3.3 release adds a highly requested feature : Support for Responsive DataGrid (Responsive Datatables)

Displaying data across various different screen sizes and resolutions has been a challenge few have been able to solve effectively. There are many solutions online, but we have gone a step further by taking Flexicious Ultimate, which is arguably among the most powerful DataGrid component for Flex applications, and added support for responsive rendering. We wanted to give you flexibility over how you want the grid to behave, so we have implemented 3 (THREE!!) different responsive modes:

1.   API to show or hide the scroll bar on basis of the screen width. Below a certain pre-configured screen width, a scroll appears, and allows the user to scroll through all the columns. Above this screen width, there is no scrollbar.

2.     An API for a priority model, where each column can be assigned a priority and the columns appear or be hidden on basis of screen width.

3.     A new column type, TransposedColumn added to accommodate smaller screens, below a certain pre-configured width, all the columns in the grid are replaced by the Transposed Column which contains, within a single cell, all the information that was held in the
previous cells in a transposed manner.

That said, lets talk about each of these modes and what they mean:

1)                      The Scrollbar mode - ResponsiveBehavior.SCROLL_BAR_  : This mode basically says, below a certain threshold (scrollBarWidthTreshhold – default 1000px), the grid will display no scrollbar. But above this width, a scrollbar is shown. This is distinct from the horizontalScrollPolicy=auto. As some of you may know, column widths are a highly nuanced topic. The widths work very differently when horizontal scrollbar exists vs not [You set this via the horizontalScrollPolicy on the grid]. There is also the additional complexity of the columnWidthMode attribute on each column that makes this further nuanced. The one thing to keep in mind is that the responsive mode does not really ‘change’ the behaviors associated with horizontal scroll policy. It merely flips the horizontal scroll policy to on or off on basis of the width of the grid in comparison to the scrollBarWidthThreshold. The behavior of individual columns in this mode still respects the original behavior. There is a lot more information about how each column is sized in each horizontal scroll policy mode, which is clarified here : http://www.flexicious.com/resources/docs29/com/flexicious/nestedtreedatagrid/FlexDataGridColumn.html#columnWidthMode

2)                      The Priority mode - ResponsiveBehavior.COLUMN_PRIORITY_MODE : This mode will show or hide columns on basis of the priority associated with them, and the threshold set on the behavior. There are 5 priority modes. Below are the settings for each priority modes – Please note, these are default values and can be configured to whatever values you like.

/**

*  The width below which columns with priority 1 are not visible.

* @type {number}

*/

this.columnPriority1WidthTreshold = 1120;

/**

*  The width below which columns with priority 2 are not visible.

* @type {number}

*/

this.columnPriority2WidthTreshold = 960;

/**

*  The width below which columns with priority 3 are not visible.

* @type {number}

*/

this.columnPriority3WidthTreshold = 800;

/**

*  The width below which columns with priority 4 are not visible.

* @type {number}

*/

this.columnPriority4WidthTreshold = 640;

/**

*  The width below which columns with priority 5 are not visible.

* @type {number}

*/

this.columnPriority5WidthTreshold = 480;

3)                      The Transposition mode - ResponsiveBehavior.TRANSPOSED_COLUMN_MODE : Similar to the scrollbar mode, this mode will show or hide a transposed column on basis of the current width of the grid in comparison to the value defined for the transposedColumnTreshold (default 450). Below this threshold value, all the columns disappear, and a single column appears which is a transposed version of all the columns in the grid. The advantage of this mode is that all the information rendered in all columns is visible. This mode currently only works with flat data (not hierarchical data). The biggest disadvantage obviously is that you loose the sorting capability across all columns, but you can enable the muticolumn sort and that allows you to modify the sort using the sort popup.

As with any newly added feature, we are hoping to make this seamlessly integrate across all other features (for example, the print/export currently does not work with Transposed columns). We are actually looking for feedback on how this will work in general, so please feel free to share your thoughts

 

Wondering what this looks like?.

1) Here is the default grid (notice the large number of columns)


 

2) Here is the same grid, smaller width, with scrollbar responsive mode (notice the scrollbar at the bottom, which was not there prior to the grid being resized)

3) Here is the same grid, with the priority responsive mode (notice not all columns are visible) the ones with lower priority are hidden.

4) Finally, Here is the same grid, with the transposition responsive mode.


As may have been obvious from the slew of posts about our upcoming features, we have been hard at work trying to make the product even better, if you have not renewed your subscription, show us your support and now would be the time to do it!

 

Finally, below is the sample code used to implement this. (You will need the latest 3.3 release - we have a pre-release available if you want to take it for a spin)

Responsive.zip (274.47 kb)