Flexicious 2.8 Released!!

clock June 25, 2012 01:15 by author Flexicious

Update : With 3.0, we've taken our dashboards to a whole new level with fully skinnable Spark Charts : http://blog.flexicious.com/post/Flexicious-30-Release-Dashboard-and-Charting-Edition.aspx 

Update : With 2.9, we've added Tiny Charts to our dashboard framework : http://blog.flexicious.com/post/Dashboarde28099s-getting-a-bow-tie!-29.aspx 

So it has been little over a month since we released 2.7. One of the largest pieces from 2.7 was the introduction of our Dashboard Framework. This allows you to quickly add highly expressive and interactive dashboards to your applications.

We have received a tremendous response to this product. We are glad that many of you liked it, and are incorporating it in your applications. Buoyed by your energy, we decided to double down on our dashboard work, and are very excited to announce Flexicious 2.8, with 6 brand new dashboard widgets:

  • Circular Gauge
  • Vertical SemiCircle Gauge
  • Horizontal SemiCircle Gauge
  • Traffic Light Widget
  • Vertical Linear Gauge
  • Horizontal Liner Gauge



One key thing - all of these widgets build on top of the highly customizable Spark framework. Using this, you will be able to do things with these controls that are near impossible to do with MX based controls. In fact, all of the above controls are essentially the same widget, just with different skins. In addition to this, we also have a examples of skinning these widgets to provide a completely custom look/feel.



We also added a whole new layout, the TileLayout for your dashboard, which allows you to define the widgets in a dashboard in row/column layouts. It also allows the user interactive control over how many rows/columns they wish to see, and automatically resizes all the widgets to fit the requested number of rows and columns. In addition, there is a set of navigation buttons that replaces the scrollbars for a more polished UX interaction behavior.




While we were developing these, we also developed a bunch of supporting controls:

  • The FieldSet control : Similar to the HTML fieldset, based on the border container from spark.
  • The Extended PopupButton: A popup button that lets you control where the popup opens (topRight,topLeft,bottomRight,bottomLeft), and blurs the correct area of the popup so that the popup appears as a part of the button.
  • The BreadCrumb control: This allows you to provide a breadcrumb navigation mechanism.


While dashboard seems to be getting all the limelight these days, it may be easy to overlook the amazing improvements that have been made to our other products. But, although not as flashy as the dashboard enhancements we've been tirelessly at work with our regular feature update cycles. Even though we just had a month from the past release, below are the features that got added to the grid products for 2.8:

Enhancement, All Grids: Added support for a number of formatting options. A number of properties and methods were added for this. You can specify a value for the format property from a list of predefined formats, or define a formatter. A new method "doFormat" then takes the value of this property and formats the data. From the AS docs:

The doFormat method returns formatted value on basis of the format properties (See description below) If the input is null, returns null. If there is a formatter specified, uses the formatter's format method to return a formatted value. If the format property is specified and no formatter is specified, the column will instantiate a formatter on basis of the value of the format property. The property can be one of 5 constants.

  • date (FORMAT_DATE) - Uses the DateUtils.MEDIUM_DATE_MASK format MMM D, YYYY - Can be customized using formatterDateString Property
  • datetime (FORMAT_DATE_TIME) - Uses the DateUtils.LONG_DATE_MASK+ " " + DateUtils.MEDIUM_TIME_MASK format MMM D, YYYY L:NN:SS A - Can be customized using formatterDateString Property
  • time (FORMAT_TIME) - Uses the DateUtils.LONG_TIME_MASK format. L:NN:SS A TZD - Can be customized using formatterDateString Property
  • currency (FORMAT_CURRENCY) - Uses formatterCurrencySymbol and formatterPrecision properties for the currency formatter.
  • number (FORMAT_NUMBER) - Uses formatterPrecision properties for the number formatter

Enhancement, All Grids: Added the new XMLExporter, to enable export to XML from all grids.

Enhancement, All Grids: Added better support for localization. See attached example.

Bug Fix, All Grids : Added code to prevent unhandled exceptions while saving exported data from crashing flash player.

Bug Fix, All Grids : Fixed the DocExporter so instead of printing out "null" it will print out blank strings.

Bug Fix, All Grids : Fixed the issue where the print renderer was not picking up custom printComponentRenderers. Added a printComponentFactory on all grids. This flag used to be on PrintOptions, which has now been deprecated. An example usage of this functionality is here : http://blog.flexicious.com/post/Watermarks-on-the-PrintPDF.aspx

Bug Fix, Classic : The copy cell functionality selected the wrong cell when one or more columns were not visible.

Bug Fix, Classic : In some cases, the MultiSelectComboBox did not show the OK Cancel buttons correctly.

Bug Fix, Ultimate : In some cases, the print grid bled over into the invisible area of the page.

Bug Fix, Ultimate : In some cases, the print operation resulted in a stackoverflow while cloning the column.

Bug Fix, Classic : Certain columns were included in print even if excludeFromPrint was set to true. Also, if the user changed column widths in the print preview screen, the actual print out did not reflect these changes.

Doc Fix, Ultimate : Added full documentation for Keyboard interaction. See override keyDownHandler in FlexDataGrid.

Enhancement, Ultimate : Added ability to change rowHeights prior to print. A new event, beforePrintDataProviderSet was added for this. An example of this functionality is attached.

Bug Fix, Ultimate : The bottom box used to hide the space left behind between the intersection of the horizontal and vertical scrollbars did not disappear when it was no longer needed, obscuring the vertical scrollbar.

Bug Fix, Ultimate : When horizontal scroll is on, with hierarchical data, if you scroll all the way to the right, expand/collapse, scroll back, and expand, grid shows blank area.

Enhancement, Ultimate : Added the getChildrenFunction, in scenarios where you wish to control the list of children for a given object.

Enhancement, Ultimate : Support for variableRowHeights when itemRenderers are used. By default, the Flexicious Ultimate Grid does not instantiate and measure each cell renderer when you set variable row heights. It just uses the measureText functionality to estimate the height required to fit the given text. In case where you have custom item renderers that have other flex components that affect the heights of the cells, the grid does not take these into consideration, for performance reasons. This flag, introduced in 2.8 will change this behavior so such cells will be taken in to account and a renderer will be instantiated. The grid will instantiate a renderer, set its data, and then measure it to calculate the height required to render it. Please note, this may slightly degrade performance, so set this flag to true only if you need it. Specifying a getRowHeightFunction and estimating the height without involving display objects will be usually faster.

Bug Fix, Ultimate : Added a new property, recalculateSeedOnEachScroll. Flag should be set to true when you have large variable height based rows that are potentially taller than the grid itself. The first row in view is the reference view. As you scroll, newer rows become the reference rows and the view port end updated. However, when you have rows that are taller than the grid, or when they account for a disproportionate amount of the viewport the grid no longer renders view port end because the reference row is large and has not scrolled out of view. This flag is used to instruct the grid to check after each scroll gesture whether or not additional rows have come into view.

Bug Fix, Ultimate : When you set enableFillerRows=true, they do not fill up the entire grid after a resize.

Bug Fix, Ultimate : On demand lazy load did not work with grids that had an XMLListCollection as the dataprovider

Enhancement, Ultimate : Support to control which column to show when the column group is expanded or collapsed. Added property collapseStateColumn. This column will be shown when the column group is collapsed. Previously, this was always the first column, now, it is configurable and defaults to the first column.

Bug Fix, Ultimate : In the export options popup, the list of columns was repeated when there were multiple levels and reusePreviousLevelColumns == true.

Bug Fix, Ultimate : When you used ICustomMatchFilterControl, due to horizontal recycle, filters that were active lost their control, because it scrolled out of view. Added flag to disable horizontal recycling on the container (enableHorizontalRecycle) to prevent this scenario.

Bug Fix, Ultimate : For Page Up, Page Down, Home and End key strokes, the grid would scroll the outer scroller if there was one. Page Up and Page Down did not work correctly when the grid was already at the top or end respectively.

Bug Fix, Ultimate : When you had colSpan or rowSpan turned on, the edit behavior did not take into account cells that are hidden by the row span of the cell above them or the column span of the cells adjacent to them.

Doc Fix, Ultimate : Removed the unused SELECT_CHECKBOX_CHANGED event.



Your Questions - Our Answers

clock June 25, 2012 00:55 by author Flexicious

Many times, a bunch of things you ask for are not quite possible by just setting a few flags. Sometimes, these require extending our API, or otherwise customizing the product. Below is a list of such customizations (and some frequently asked questions) that we are publishing for the benefit of the community.


1) How can I draw a custom cell border?

  • Use the cell border function.



CellBorderFunction.mxml (1.44 kb)


2)When I run my application, the print/preview/export/settings window looks weird, or the MultiSelectCombobox looks like buttons instead of checkboxes.


  • This most often happens when you use modules. Fix is to add a blank copy of ExtendedDataGrid/ExtendedAdvancedDataGrid/FlexDataGrid in the top level application.


As an FYI, this same issue sometimes will cause errors like:

TypeError: Error #1007: Instantiation attempted on a non-constructor.


ArgumentError: Error #2004: Uno de los parámetros no es válido.
  at flash.display::Graphics/drawRect()

3) How can I add a custom right click menu item to a column?

  • Use the ContextMenu.MENU_SELECT event.


ColumnContextMenu.mxml (1.65 kb)


4)When I enter text into an editable cell, and hit return, the editor automatically opens up the cell immediately below it for editing. When we are done editing a cell, and close the edit session by hitting return or clicking elsewhere, we just want the editing to stop - no auto-advance. How can I prevent this auto-advance feature from happening when the current editing session ends?

  • This is standard behavior on the SDK datagrids as well. You can potentially do something like listen for itemEditEnd, and do a callLater endEdit.


protected function grid_itemEditEndHandler(event:FlexDataGridItemEditEvent):void




public function endEdit():void{






5) When "selectionMode='multipleRows'" I would like that you need to hold down ctrl-key to add/remove multiples, and shift key to do ranges, while a normal click kills the current selection and just selects the row that was clicked. How do I enable this?

  • This was added in 2.7. Just set enableStickyControlKeySelection=true.

6) The box containing the sort direction icon / sort order number is way too big and frequently obscures the column labels. How can I reduce the size of this box?

  • You can set headerSortSeparatorRight style to reduce the width of the box. You can even customize the cell so it shows the box differently.



MyHeaderCell.as (1.07 kb)

CustomHeaderCell.mxml (1.30 kb)

7) How can I apply custom styles to the print version of the grid?

  • Just add the custom styles for print to your style sheet for the appropriate print component. If the component is a ExtendedDataGrid, this is a ExtendedPrintDataGrid. IF it is an ExtendedAdvancedDataGrid, this is an printAdvancedDataGrid. If it is FlexDataGrid(Ultimate) then this is a PrintFlexDataGrid.


CustomStyles.txt (242.00 bytes)

8) How to I center the print/export popup?

  • You can use the popupParent property of the print/exportOptions for this.


ExcelExportCenterWindow.mxml (1.13 kb)

9) How can I localize the various strings used through out the library? The Export, Print, Preview, Settings, windows. I do not have the source code.

  • In your application initialize, load up your resource bundle, and set the appropriate properties on the Constants class.


Localization.mxml (5.72 kb)

10) I am using variableRowHeight, but the rows are not sizing to fit my content

  • First, ensure that you have set wordWrap on atleast one column that you need the text to wrap (and thus need to use variableRowHeight) for.
  • Second, if you are using itemRenderers, by default, Ultimate does not take these into account for performance reasons. In 2.8, a flag has been added, variableRowHeightUseRendererForCalculation. You can turn this on.
  • Third, instead of the flag above, you can control the row height calculation mechanism altogether. Attached is an example.


GetRowHeightFunction.mxml (1.09 kb)


11) I installed the latest file but still it get the following issue

TypeError: Error #2007: Parameter colors must be non-null.
                at flash.display::Graphics/beginGradientFill()
                at com.flexicious.nestedtreedatagrid.utils::ExtendedUIUtils$/gradientFill()
TypeError: Error #1010: A term is undefined and has no properties.
at com.flexicious.nestedtreedatagrid.cells::CellUtils$/getBackgroundColors()[
  • This happens if you either use modules OR link our swc indirectly.
  • If you use modules, add a blank copy of the FlexDataGrid in the top level application <nestedtreedatagrid:FlexDataGrid/>
  • If you link our swc indirectly, please use the following steps.
  1. Make a copy of the swc on your desktop
  2. Rename it to swc.zip
  3. Open it up, extract the defaults.css in there
  4. Place the defaults.css in your application, rename it to flexiciousdefaults.css, and import it into your Main application file as <fx:Style source=”flexiciousdefaults.css”/>


12) For Ultimate, When the hierarchy's columns width in the top level is smaller than the next level's width (and the horizontal scroll policy of the grid is "on"/"auto"), the horizontal scroller will be calculated only by the top level's width, making some columns in the next level unreachable.

  • This one is actually a design limitation of the grid. The grid will measure the top level columns to define its width. One of the things other customers have done is that give a large column width to the last top level column, which is large enough so that sum of column widths at top level is larger than the sum of column widths at the bottom level.

13) My pager control is too wide for the width of my grid, and my buttons are being cutoff. What can I do?

  • There are a couple of options with this. In the first option, you can consider using the PagerControlAS that was released with 2.7. If your wide pager is being caused because of too many toolbar actions, this control can resolve the issue inherently.
  • Alternatively, you can use the FlowBox control from FlexLib. This basically creates a flow layout like the one below. It breaks the pager into two rows based on the width of the grid. Here is an example FlowPager.txt (8.30 kb) (this is for Classic, but Ultimate would be the same approach). Please ensure you provide a higher value for the pagerRowHeight so the flow layout has enough space to layout the contents.


Customizing the DataGrid Toolbar, Print Options, Print Preview, Export Options, Settings, Save Setings, and MultiColumn Sort Popups

clock June 11, 2012 00:27 by author Flexicious

All our products ship with a lot of functionality that comes with its own UI.

  • The toolbars on top of each datagrid have their own UI
  • The export comes with its own export type and column picker
  • The print comes with the print column picker and the print preview window
  • The user settings persistence mechanism comes with its own popup to save and set preferences
  • The multi column sort picker in Ultimate comes with its own  UI

So, that said, the first thing you should know is that we have built in a mechanism  that allows you to customize this UI, whether it be for localization purposes, or for customization of functionality. There are various blog posts that talk about individual aspects  of how to customize each of these UI’s, but this blog post serves as a one stop shop for your requirements around customization of each of these UIS. There are two components in the attached project, first one demonstrates how to customize the UI for each of the above for the Ultimate DataGrid (class name FlexDataGrid). The Dashboard (not shown here) follows similar mechanism, however, since it is based on Spark Skinning, the entry point to make changes is the custom skin. The second example shows the same process for Classic (ExtendedDataGrid) and Advanced(ExtendedAdvancedDataGrid) DataGrids. Spark (ExtendedSparkDataGrid) follows a similar mechanism. Under the hood, all our products share the same code base to do most of the grunt work for the features listed above. The only difference is that with Ultimate/Dashboard, we started to package all of the UI into the core library for convenience, which we did not do for Classic. This was primarily done for backwards compatibility, since most of the Classic folks are "used to" having these assets outside.




And below is the version of the project for the new 2.9 release: