We are proud to make two exciting announcements today:

First, we've released a brand new product, the Flexicious Dashboard Platform!

The Flexicious Dashboard Platform is a new product from Flexicious that empowers RIA developers to provide feature rich, expressive, highly customizable, and deeply engaging dashboard experience to their users. Although there are a few implementations out there that do this, none provides all the features that we do, and none of them are built on top of the Spark Skinning framework, which makes it enormously more easy to customize the look and feel of the product. Details here

Second, in our relentless pursuit of excellence, we've released yet another major update to all our existing products, including Flexicious Classic, Advanced, Ultimate and Spark DataGrids. Details here

Thank you for your continued support and do not hesitate to reach out to us if you have any questions!

The Flexicious Dashboard Platform is a new product from Flexicious that empowers RIA developers to provide feature rich, expressive, highly customizable, and deeply engaging dashboard experience to their users.

It provides you with a lot of the base functionality that is standard in dashboard applications, in addition to a number of highly productive features that is sure to WOW your customers.

Right out of the box, you get:
A container for your dashboard that provides;

•     Support for configurable layout of dashlets, and provision for users to move and resize dashlets, integrated with preference persistence so dashboard loads exactly how the user left it.
•     Ability to organize dashlets in zones. Ability to drag and drop dashlets between zones, again with preference persistence mechanism.
•     Ability to Print Preview and Print the dashboard or a single dashlet
•     Ability to export the Dashboard to PDF
•     Ability for your users to save the current view of the dashboard via preferences
•     Ability Show/Hide Dashlets, control which dashlets appear where and at what size.
•     An auto refresh mechanism
•     Ability to control dashlet operations including:
  •         Move dashlets via a convenient drag and drop
  •         Resize dashlets
  •         Expand/Collapse Dashlets
  •         Open/Close Dashlets
  •         Maximize/Minimize Dashlets
  •         Loading Animation
•     Based on the Spark skinning model, provides the ability to completely skin the look and feel of the dashboard as well as the dashlets.
•     A number of professional, excellent looking built in skins

Check out the demo here
Read the getting started guide here.
Get the PDF copy of the Getting Started Guide here.
Download the trial here

2.7 - We should rename this "The Performance Release". We took a long hard look at every single millisecond that the grid takes to initialize, analyzed the time taken by each and every section of the grid and made significant strides in overall performance. Now, keep in perspective that the grid always rendered within sub second timeframes. However, it was towards the higher end of the sub-second range for some of our complicated use cases. We were not very happy with that, and had always been itching to go in and re-write some of the major bottlenecks. Regression is always a risk with changes like this, but we've been very careful with not introducing any new behavior by default. You have to explicitly turn on the new code. None of the new code will execute unless you specifically turn it on. So, with that said, let's take a quick look at what's new on the performance front:

1) enableDataCellOptimization: This is the magic pixie dust that you need to supercharge your Ultimate experience. An interesting tidbit, the stealth name of this property was "enableTwinTurbo" , so if you run into that word somewhere in the samples or the non public API, don't be surprised. (We're really a bunch of nerds). We've managed to see a reduction of over 30% on some of our grids. Your mileage may vary very widely, because it all depends on what you are doing with your grid, but in one example, our rendering time went from about 830 ms (averaged across 100 instantiations) to less around 474 ms, all while consuming less memory. Keep in mind however, the default for this property is false, and you have to explicitly set it to true. We did this to ensure you do not run into any regression impact. Please try it out and let us know if you find any issues.Below is the asdocs for this new property:

2) PagerControlAS: This one has been bothering us for a while now. Our existing pager control goes against a lot of our own principles of performance optimizations. It uses too many nested containers, it relies a lot on databinding, it uses repeaters, it does not optimize how often it gets drawn in response to lifecycle events, and it is built in MXML instead of pure actionscript. Well, move over PagerControl, PagerControlAS is here. Before we delve into what we did – here's a little performance candy – we went from about 110 ms (worse case) to about 30 (worse case). And that's not all – we actually added a new feature (sorry we cant help it )– ability to have nested toolbar actions with an hbox that converts itself to a flyover menu when your buttons exceed the width available. See the overflow toolbar menu example for more details. Like always, this feature does not get turned on automatically, you have to specify the new pager control as such:

A quick rundown for the those of you new to Flex/Flexicious:

The Flex SDK has 3 DataGrids provided by Adobe:
DataGrid
Advanced DataGrid
Spark DataGrid

Flexicious has extensions built on top of each of the above. Usually referred to as :
Classic (ExtendedDataGrid)
Advanced (ExtendedAdvancedDataGrid)
Spark (ExtendedSparkDataGrid – newly launched)
And finally, we have a grid that we built from the ground up – Flexicious Ultimate which is the most feature rich product in the list above.

A couple weeks ago, we launched the new Flexicious Spark Extension. This caused a number of questions, concerns and feedback. (Thanks and keep it coming). A number of our customers immediately brought up - “What does this mean for Ultimate”?

So, let’s answer that first, because it is an important question. Ultimate has and will continue to be the Superset of everything in terms of functionality for the foreseeable future.  It is the most powerful DataGrid component available for Flex today, and is by any measure, our most successful product. Our largest Enterprise customers use it almost exclusively, simply because it can do almost everything that the others can, and a lot more. It is where our innovation has and will continue to be born for the foreseeable future. DataGrids are often the workhorse components of most RIA applications. We understand the crucial role we play in this ecosystem and take your concerns very seriously.

Although we believe that the Spark architecture has advantages over the Halo architecture, from a purely functional perspective, the Spark DataGrid is nowhere close to Halo ADG or Ultimate. Seasoned Flex developers know that the Spark DataGrid is *still* quite primitive in terms of feature set, but it does what it does very well, i.e. display of flat data. However, the moment you need hierarchical data, or column groups, or locked columns and rows, and a number of other features, well, you better stick with Ultimate or Halo (and consequently, our AdvancedDataGrid Extension).

It’s always good to have options. A number of folks are using the Spark data grid exclusively in their apps, where there isn’t a requirement for complex functionality, and that is fine. For such applications, either our Spark or Classic product will be a good choice.

Finally, all our products share a lot of the codebase. The API’s are very consistent, property names and method signatures are usually consistent except when they have to support additional functionality, and moving from one product to another is usually quite trivial. 

It almost feels like dejavu. This time last year, we were hard at working finishing up Ultimate. Spark datagrid was very primitive at the time (and compared to Ultimate, still is). However, there has been significant progress in terms of feature parity with MX, and although not quite there yet, it certainly is on its way. The time was right for us to jump in and add a little bit of our Flexicious Sparkle  to the Spark DataGrid :-)

So, with no further ado, presenting... the all new.. Flexicious SPARK datagrid extension!! Check out the demo here.

With the addition of this new product, we're changing our pricing a little bit, in that we're eliminating the USD 299 option. It was very small percentage of our sales anyway. Now, for USD 799.99 you get all five of our products - Classic, Advanced, Spark, Ultimate, and SQLEDT.  You can purchase unlimited domains, and the entire Flexicious source code as add-ons as well. This opens up the opportunity for our Single Developer customers to have access to unlimited domains/source, something a lot of you have asked for.

For existing customers, there is an option to add the new Spark DataGrid Extension to your product portfolio by paying the difference, just use the request quote form.

As will be obvious from the previous post, 2.6 sees the release of a new product, the Flexicious Spark DataGrid Extension. If you are interested in adding this product to your license, please read this. There has been some reorganization of the codebase to account for the requirements of the Spark DataGrid, some of these are interface changes documented below. However, there have been many enhancements, a brand new feature (Row Spans and Columns Spans), numerous bug fixes, and performance improvements for Ultimate, and quite a few for Classic as well. We have been hard at work, and are continuing at a feverish pace with new features, new products, performance improvements.

We will be sending out subscription renewal notices moving forward. PLEASE, renew your subscription in time. We hate it when support is delayed because of an expired subscription that needs to be renewed. We pride ourselves in providing accurate and timely support. We want you to have access to help whenever you need it, so please renew in time. This enforces your commitment to the product and energizes our drive to add new features and improve existing ones.

Enhancement, Ultimate: Added rowSpanFunction and colSpanFunction. Added RowSpanExample and colSpanExample to demonsrate the new row and column span functionality.

New Example, Row Span and Col Span - Newly added example to demonstrate the row and column span abilities of Flexicious Ultimate

New Example, Remoting Backend - Ultimate working with a live backend, similar to the Classic Examples, with filterPageSortMode=server and one page of data loaded at any given time.

New Example, Trader View - Ultimate demonstrating how to quickly update the values of a specific cell, without causing a grid rebuild. This enables you to process high frequency updates from the backend.

New Example, Selection Options : Demonstration of the new Selection Exclusion mechanism (See blog post)

Enhancement, Ultimate: Added the getRowHeightFunction, which can be used to override the built in row height calculation functionality when variableRowHeight=true

Enhancement, Ultimate: Added enableSelectionexclusion

Enhancement, Ultimate: Added code so that if enableSelectionCascade, on lazy load setChildData call, automatically add to children next level selected objects

Enhancement, Ultimate: Added code so that if enableDynamicLevels=true, on lazy load setChildData call, automatically add next level if the current objects children have more children.

Enhancement, Classic and Ultimate: Added the properties filterCompareFunction and filterConverterFunction to convert data prior to filter comparision. See the XMLData example for details.

Enhancement, Classic and Ultimate: Added dateFormatString to DateComboBox to control the date format of the Custom date range popup. You can instantiate this on the column via: filterRenderer="{UIUtils.createRenderer(DateComboBox,{dateFormatString:'DD/MM/YYYY'})}"

Bug Fix, Classic : Fix for issue of preference persistence of grouped columns.

Bug Fix, Ultimate : Scenarios where there are editable cells widely spaced apart, tabbing results in NPE.

Bug Fix, Ultimate : Nested Data with level renderers and variable row height did not size correctly.

Bug Fix, Ultimate : When data is added dynamically to a previously drawn grid, some cells showed up empty even when there was text to show.

Bug Fix, Ultimate : Refresh operations, like sorting, rebuilding, expand collapse caused some cells to loose formatting information, and icon state.

Bug Fix, Ultimate : Footer Cells did not update on filter.

Bug Fix, Ultimate : Cells with a custom cellTextColorFunction defined did not retain color post scrolling.

Bug Fix, Ultimate : Under certain circumstances, vertical gridlines did not extend all the way down to the grid, or post resize, did not retract back into the grids viewport.

Bug Fix, Ultimate : Expand Collapse operations that happened in conjunction with the scrollbar appearing or disappearing resulted in weird state.

Bug Fix, Ultimate : Edit row highlight did not disappear until mouse over on another row.

Enhancement, Ultimate : variableRowHeight – for items where word wrap did not apply (text not long enough) we did not respect the rowHeight.

Enhancement, Ultimate : Item being edited, cell text showed through item editor. Cell text will now be hidden.

Enhancement, Ultimate Automation: Added support for automation of CheckBox Click Events

Enhancement, Ultimate Automation: Added support for Level Renderer Cell Automation

Bug Fix, Ultimate : RowDisabledFunction was being ignored, and such rows were participating in hover, selection and drag. This will now be prevented. Disabled Cells will not be editable, hoverable, selectable or draggable.

Bug Fix, Ultimate : Clicking checkbox header sometimes caused the rows to collapse.

Bug Fix, Ultimate : Re-position the no-data message on grid resize.

Bug Fix, Ultimate : Support for filterCompareFunction on Ultimate did not work.

Default Changed : The enableSelectionCascade now defaults to true.

Interface Changed : Changed IExtendedDataGrid to have get and setColumn method, and getDataProvider, renamed get dataProvider to getDataProvider. This was done because the Spark Datagrid has different return types for these properties and will not match the interface.

Method renamed : Renamed the selectAll method to selectAllCheckboxes, and clearSelection to clearCheckboxSelection. This was done because the Spark DataGrid already assigns a different meaning to these methods.

Deprecated : Row Number Column. This has been deprecated, since it is not applicable for hierarchical data. Also, causing performance issues.

Deprecated : FlexDataGridColumnLevel.widthDistributionMode. This has been removed. It was never used, and its place was taken by columnWidthMode. This property is defined on the column itself.

Bug Fix, Ultimate: Print failed in certain scenarios with preferences stored. Also, fix for scenarios where the container pushes the grid body to a negative height post print, the rows were disappearing. A sanity check has been added for this.

Bug Fix, Classic: Issue with preferences not being persisted for ICustomMatchFilterControls resolved.

Added Boolean flag autoRegister to interface IFilterControl. Just add the following to your FilterInclude:

/**

* Register with the container on creation complete

*/

public function get autoRegister():Boolean

{

return filterControlInterface.autoRegister;

}

/**

* @private

*/

public function set autoRegister(value:Boolean):void

{

filterControlInterface.autoRegister = value;

}

Also, since the Spark datagrid assigns a different type to the columns and dataprovider property on the grid, the IExtendedDataGrid has been modified to have getColumns, setColumns, getDataProvider, and setDataProvider methods. So in MyDocExporter, you will see this error:

Access of possibly undefined property columns through a reference with static type com.flexicious.grids.dependencies:IExtendedDataGrid. MyDocExporter.as /main/src/com/sample/examples/support/export line 31 Flex Problem

Just replace grid.columns with grid.getColumns()

One of the things about support for hierarchical data, is that concepts that apply to flat data become significantly difficult to conceptualize and implement. To put this in context, imagine the good old filtering functionality. With flat data, you have a set of columns, and a filter will apply to one of the columns.

With hierarchical data, this concept becomes more difficult to implement, because now you have to filter out each item that matches a filter, keeping in perspective that its ascendants or descendants may or may not match the filter. So if a child matches a filter, but the parent does not, we would take out the parent, which in essence takes out the child as well. Then you have scenarios where the parent matches, but none of the children do. Even the concept of matching requires thought, because the field being searched on might exist on the parent, but not the child or vice versa, since they could potentially be different object types and might not share the property being searched on. Whew! That was a mouthful.

Since we have to account for these scenarios, we have the following properties:

• enableRecursiveSearch: For Grouped datagrids(reusePreviousLevelColumns=true), searching on this column will cause match current item, as well as any of its children. If any children match, this item matches as well.
• enableHideIfNoChildren: Flag to control whether or not an item that has no children is filtered out or not.
• filterExcludeObjectsWithoutMatchField : By default, for hierarchical datagrids, when there is an object that does not have the property being searched for, these objects are included in the filter match. Set this flag to true to exclude such objects.

It is things like this that we consider to be the strength of Flexicious Ultimate. It’s the fact that we have already thought about scenarios like that so you don’t have to. There are literally hundreds of things like this.

That brings us to the topic of this blog post, the selection exclusion mechanism.

One of the things that we have built into the architecture of the product is the concept of lazy loaded hierarchical datagrids. Data is loaded on demand as the user scrolls (Virtual scroll) or as the item is expanded (Lazy Load, Full and Partial). This all works fine, but what do you do about selection cascade and bubble? So far, (up until 2.5) this was limited to eager loaded grids, so when you check a parent, we run through and automatically select the children, i.e. add them to the selectedObjects collection. The big assumption here is that children are already loaded when you select the parent. This assumption falls flat on its face when you have lazy load or virtual scroll. In scenarios like this, you could select a row, and then expand or scroll. It will also cause performance issues if you have large datasets and you end up selecting a lot of records that cascade selection. Well, say hello to enableSelectionExclusion. From the docs:

enableSelectionExclusion: Support for selection based on exclusion. In scenarios where you have lazy loaded grids, selection cascade and select all will simply set flags on the selectionInfo object. The selectedObjects and selectedKeys no longer contain references to data that is selected. Instead, they contain the items that the user explicitly selected. unSelectedObjects will contain items that the user explicitly unselected. This helps maintain selection across very large lazy loaded datasets. When you set the enableSelectionExclusion flag to true, use the selectionInfo object to access the selection (or build a query on the server) to identify the objects user selected.

The selectionInfo object is a simple list of LevelSelectionInfo objects, which contains explicitly selected and unselected objects, which can then be used to construct a query on the server as to what the selection on the client was.

See the VirtualScrollExample for this concept in action!

With 2.5 just barely out, we've been hard at work preparing for 2.6. One of the most visible features of 2.6.... Drumroll Please...... Row Span, Col Span and Merged Cells. Once again ladies and gentlemen, for the first time in the history of Flex, a DataGrid that supports the ability to define row and column spans.

A Picture is better than a thousand words, so we'll save the markup and discussion about the API changes for a latest post, but this was looking way too good to let it sit in the oven until the 2.6 release.

We're looking for existing customers or prospects to try out the early release for 2.6, so please feel free to reach out to us using the request trial page to and let us know if you are interested!!

Row Span:

Col Span:

Update : For those of you who are evaluating the cell merge functionality, the trial download does not contain the related demo file. While we're in the process of publishing it to the demo site as well as the trial download, you can use the test project bellow in the interim. (You will need the trial library which you can get using the Download Trial Link)

CellMerge.zip (6.34 kb)

Since the release of Ultimate in April, we’ve come a long way today, with hundreds of developers at world class organizations adopting our products for their complex data presentation and interaction needs. Since April, we have already had 4 releases, each with numerous features added. 2.5, is by far, the largest release. For those of you who have been following the Spark DataGrids’ progress you will agree that we’ve achieved a remarkable amount of functionality and power in a very short period of time.  Our focus is laser thin, and we are able to maintain a highly agile process by being in constant touch with our customers and quickly adapting to your needs. We release often, send out pre-release builds (you can request the latest stable build anytime),  and use customer feedback to shape our product. It’s a interactive dialogue, it has made our product enormously more powerful and precise in terms of meeting the requirements of LOB application developers.

Presenting, Flexicious 2.5

New Feature, Ultimate : Virtual Scroll (blog post here)

New Feature, Ultimate : External Filters. Each level now exposes a property called filterFunction, which can be a callback tied to a separate filtering panel. Added example ExternalFilter to demonstrate this.

New Feature, Ultimate : Decoupled and Highly configurable Disclosure Icons. Added propreties enableDefaultDisclosureIconAdded, enableExpandCollapseIcon, enableLabelAndCheckBox. Added style properties expandCollapseIconLeft/Right/Top/Bottom,   SelectionUI1 and SelectionUI2 examples to demonstrate this.

New Feature, Ultimate : Built in change tracking. Added propreties enableTrackChanges, changes, and method trackChange. If set to true, each addition, update(via the grid) or deletion to the data provider will be tracked in the changes. Added the ChangeTrackingAPI example to demonstrate this functionality

New Feature, Ultimate : Split headers for MultiColumnSort, added ability to define the number of sort dropdowns in the MultiColumnSort popup. multiColumnSortNumberFields. Extended multi column sort to inner levels for nested grids.

Enhancement, Ultimate : Added the showMessage function, which will show the spinner without the wheel and display the message. This is utilized by the enableNoDataMessage, which will show a text like “No Records Found” when a zero length data provider is set, or when filter results in nothing.

Enhancement, Ultimate : Added the built in support for autorefresh. Added properties enableAutoRefresh, lastAutoRefresh, autorefreshInterval and autoRefresh event to support this feature.

Enhancement, Classic And Ultimate : Enabled Automation support for all our products. Some of our customers have been using the Automation support that we started providing earlier this year. With 2.5, we are making this a part of the official build. We have also added examples for FlexMonkey and QTP, blog post here:

Enhancement, Classic And Ultimate : Updated preference persistence mechanism to support column groups

Enhancement, Classic And Ultimate : Updated printing mechanism to support Column groups

Enhancement, Ultimate : Added keyboard support for Page Up, Page Down,  Home, End, CTRL + SHIFT LEFT/RIGHT/UP/DOWN, F2 Keys

Enhancement, Ultimate : Added editable flag at the grid level, similar to Flex SDK datagrids. Setting editable on the grid is necessary to enable edit

Enhancement, Ultimate : Added the expandChildrenOf method, and the editedItemPosition method, for consistency with the SDK ADG

Enhancement, Ultimate : Added the columnGroupCellRenderer property, to provide ability to customize the container cells for column groups.

Enhancement, Ultimate : Moved the cellBackgroundColorFunction and the cellTextColorFunction on to the grid, so now you can control the background and text colors of any cell, including the chrome(header,footer,filter,pager,level renderer,column group) cells

Enhancement, Ultimate : Added the enableRecursiveSearch, enableHideIfNoChildren properties. For grouped datagrids, this will search each level for matching criteria, and automatically hide those parents that do not have any children that match the search criteria. Also the default behavior of the grid is to automatically add records that do not have the field being search on. This is especially applicable to grouped datagrids where the parent may not have all the fields being searched on. We added a property, filterExcludeItemWithoutMatchField that will prevent these items from showing up. Also, added 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.

Enhancement, Ultimate : Automatic preservation of open items and selected items. If you specify a selectedKeyField that is unique across the grid, the grid will maintain the state of the dataprovider in terms of open and selected items when the data provider is refreshed. Please set the following flags to false as well: clearSelectionOnDataProviderChange, clearOpenItemsOnDataProviderChange. Also added rebuildGridOnDataProviderChange, which, when set to false will only redraw the body region when you change the dataprovider. All of these properties together make the process of runtime refresh of the dataprovider (for example, post an autorefresh or after reloading the dataprovider after save/edit) easier.

Enhancement, Classic/Ultimate : Print Preview warning message. By default, we show a red warning when the user changes the page layout or size to notify them that this does not affect the actual printout, and these settings need to be applied again on the print window. We added a showWarningMessage property to disable this message assuming you have another way of notifying the user.

Enhancement, Ultimate : Added ability to highlight the currently editing row. Exposed properties enableEditrowHighlight and editItemColors style property

Enhancement, Ultimate : Added enableActiveCellHighlight, Flag to hightlight the active cell. If set to true (default) the cell under the mouse or if navigating via keyboard, the current reference cell will be highlighted with the activeCellColor style

Enhancement, Ultimate : Performance optimizations, Ultimate should render 10-15% faster. Read the performance post for details.

Enhancement, Ultimate : Added property enableSelectionBasedOnSelectedField, selectedField and method setOpenItemsBasedOnSelectedField. Flag to enable dataprovider based preselection of data. Please ensure you set selectedField at all appropriate columns levels. selectedField  is a field on the dataprovider that indicates that this item should be selected

Enhancement, Ultimate : Added timers to the icon hover over, so accidental move of the mouse over the icon and out of the tooltip does not cause it to disappear or appear unintentionally. Added the tooltipWatcherTimeout property to support this.

Bug Fix Ultimate: Excel Export of Grouped DataGrids (reusePreviousLevelColumns=true) was pushing nested levels one column in. This has now been fixed, and instead of skipping a column to emulate the hierarchy, we insert spaces so it looks like a hierarchical export.

Bug Fix, Classic/Ultimate : Fixed issue with filterComboBoxWidth not being applied to the MultiSelectComboBox dropdown.

Bug Fix, Ultimate : Fixed issue with textAlign=center not working

Bug Fix, Ultimate : Fixed issue with drawing custom icons for expand collapse

Bug Fix, Classic/Ultimate : Fixed issue with AutoComplete ComboBox scrolling and row count.

Bug Fix, Ultimate : Clicking on a row did not immediately change the color, you had to hover out and hover back in

Bug Fix, Ultimate : Clicking on the fill area of the grid did not end the current edit session

Bug Fix, Classic and Ultimate : Fixed an issue with the Collection Manipulator that was causing it to fail in Flash Player 10.1 and below.

Bug Fix Ultimate: Right Click Cell Select. Intermittent Issue from Flash Player https://bugs.adobe.com/jira/browse/SDK-31155

Bug Fix Ultimate : Paging at inner nested levels was broken, fixed

Bug Fix Ultimate : Show Hide Footers made the footer area go blank

Bug Fix Ultimate : Show hide all columns caused last column to occupy all space

Bug Fix Classic: Preference persistence would not correctly restore the order of columns

Bug Fix Classic : The halo focus rectangle on column being edited with ExtendedAdvancedDatagrid was showing one row off.

Virtual Scroll: With the release of Ultimate 2.5, we present for the first time in the history of Flex, (and most other UI technologies) Virtual Scroll with Hierarchical data. The mandate when we came up with this feature was that we would need to be able to support scrolling through potentially millions of rows of hierarchical data. Implementing Virtual Scroll for Flat Data is quite straightforward. But when you start thinking about extending the same for hierarchical data, it starts to get complicated even to think about it. Add in ability to support multi headers, footers, selection, and you have a real challenge at hand. Well, the adventurers we are, we took it on. Before you read through the how-to, jump over to the demo, scroll all the way down, and run the Virtual Scroll example to see it in action.

Below are the guidelines to implementing Virtual Scroll for your applications:

1) Define your levels, columns, etc.

2) When you set the dataProvider, ensure you set grid.totalRecords. This is the same process you would follow with filterPageSortMode=server.

3) Set enableVirtualScroll=true

4) Set itemLoadMode and filterPageSortMode=server. This is important, because virtual scroll assumes that you are scrolling through a large set of related data, and the only navigational gesture for record identification of the current viewport is the scroll position of the vertical scroll bar.

5) Set the selectedKeyField. This is also important, not from a virtual scroll perspective, but specifically where filterPageSortMode is set to server. Ultimate (and classic) expose this field, because it attempts to resolve a fundamental issue that is left unaddressed by the Flex SDK DataGrids, which is maintenance of selection and state across data refreshes. We’ve talked about this in previous blog posts, but the selectedKeyField is primarily a pointer to a property on the model objects in the dataprovider that uniquely identifies this record in the database. For example, if you are showing a list of employees, the selectedKeyField should be employeeId. This is what the grid is going to use to “remember” which records were “selected” or “open”

6) Set up the numChildrenField. This is required if you have hierarchical data. When you enable virtual scroll, the grid needs to know upfront if the item being drawn has children. This information is then used to draw the disclosure Icon. It is also used to calculate the differential in height that opening or closing a specific item will cause.

7) Wire up the virtualScroll event. This is an event of type FlexDataGridVirtualScrollEvent. This event has a property called “recordsToLoad”. This is an array that contains VirtualScrollLoadInfo records. This array basically tells you which records to load, and at what levels. For flat grids, this will be a list record indexes at the top level. But for hierarchical grids, it will depend on what items are open, how many children each item has, and where you have scrolled to. When this event is dispatched, it is dispatched with VirtualScrollLoadInfo records where the “item” property will be null. It is in this event that you will issue a server call, to fetch the corresponding “item” records on basis of the record Index (and parent for child level records). Once you fetch the records from the database, you can then populate the recordsToLoad array with the data retrieved from the server, and call the grid.setVirtualScrollData, passing in the same array that was given to you in the event.

Virtual Scroll is quite similar to paging from a backend server implementation perspective. In our regular paging examples, we provide a mechanism to show you how to implement backend that consumes a page index, page size, and filter information. You would do the same thing here, with the exception that instead of page index and page size, you will get exact record indexes. The array of Virtual Scroll Data will also optionally contain header and footer rows. From a backend implementation perspective, you’ll ignore these.

8) A few other flags that might be of interest:

a. enableDrawAsYouScroll : When you set this to true, the grid continuously dispatches the “virtualScroll” event. You should set this to true only when you have a need for this, because for the most part, you only want to dispatch the scroll when the user pauses scrolling.

b. virtualScrollDelay : The amount of time to wait before dispatching the virtualScrollEvent