More Samples
Download Wijmo


This view shows the FlexGrid control's basic features. It binds the grid to a data source and has menus below that allow you to select the number of data items, the selection mode, and the culture, and whether to use data mapping and formatting. Notice how the grid remains fast and fluid even with large numbers of data items. FlexGrid achieves this level of performance by automatically virtualizing rows and columns.

You can select cells and ranges with the keyboard and the mouse. The current selection is updated on the screen automatically. Use the Selection menu below to try out the various selection modes. Note that the ListBox mode allows you to select non-contiguous rows.

You can resize and move columns by dragging with the mouse, and auto-size columns by double-clicking the right edges of column headers. If you press the control key while resizing a selected column, all selected columns are resized.

You can sort columns by clicking their headers. Press the control key when you click the column header to remove the sort.

The filter and navigation bars above the grid allow you to filter and navigate through the data. Both are implemented using the ICollectionView interface, as you would do in C# and .NET.

Notice that unlike the standard AngularJS search filter, this one supports multi-term searches, so if you type us gad red, the grid shows items that contain all of these terms (country is 'US,' product is 'Gadget,' and color is 'red').

The buttons at the bottom demonstrate the column and row isVisible property, and the column width and row height properties, as well as the FlexGrid scrollPosition property.