This demo illustrates some of the visual and performance features of the KineticGrid component. The demo contains four tabbed grids, the first of which is a KineticGrid, the others, respectively are an Advanced Data Grid, an MX Grid, and a Spark Grid (from Flex 4.5.1).

Each grid has an independent data provider of 6000 rows of simple data objects, and the user can Add, Move, Delete and Update arbitrary rows and monitor performance.

This demo shows several grid features that are not implemented in the Financials Demo: Column groups and nested column groups, single- and multi-level sorting, column resizing from within the content area, and fixed columns (the column with header 'Column 4' is fixed).

There are 4 different row types in the KineticGrid demo, all based on the Index column of the row.

This panel will allow you to display and change the current frame rate of the application, both the defined rate (displayed as Current Rate) and the actual rate, averaged over 10, 100 and 200 frames.

The Flash player will attempt to render frames at the requested frame rate - should the average frame rate drop below the defined rate, the Flash player is running at 100%.

The average frame rate will only be displayed if the 'Display Actual Rates' checkbox is selected.

Scrolling performance can be particularly damaging to performance in Flex. This panel lets you scroll the selected grid automatically, making a single scroll change every frame.

By default, it will scroll down a single line 200 time, then back up, but you can change both e number or lines scrolled each frame, the total number of scroll operations to carry out, and whether you want to it be bi-directional.

Increasing the number of lines per frame will show you the performance impact when scrolling large data sets, keeping it low will show you the performance for small data sets.

This panel enables you to save and restore the state of the KineticGrid to a named state. Among the aspects to be saved are the column positions, visibility,and widths. At any point, a saved state can be loaded which will apply the state immediately to the grid.

This panel lets you manipulate the rows displayed in the active grid. The operation can be selected from the dropdown box, and executed by clicking on the operation button.

You can execute the same operation multiple times by selecting the 'Execute Multiple Times' checkbox. When selected, an operation is generated on every frame for the specified count.

The operations available are:

• Add Row - Add one or more rows at the specified index.
• Remove Row - Remove one or more rows at the specified index
• Move Row - Move one or more rows from the specified index to the specified destination index
• Replace Row - Replace the row data at the specified index with a new object
• Update Row - Update all fields of the row data at the specified index
• Refresh Rows - Notify listeners that data rows have been refreshed
• Reset Rows - Notify listeners that data provider has been reset