Flexicious Client Bound Flex Advanced DataGrid (All Pages loaded at once, paging/sort/filter happens on client.)

Summary :

This example demonstrates the usage of Flexicious Client Bound Flex Advanced DataGrid in its most basic form. It shows the usage of the grid to perform:

• Advanced DataGrid Paging
• Advanced DataGrid Filter
• Advanced DataGrid Sorting (Support for the Advanced DataGrid multi column sort across pages.)
• Advanced DataGrid Select All CheckBox Column
• Customization of the Advanced DataGrid Filter Row
• Customization of the Advanced DataGrid Pager Row
• Demonstration of the inherent Advanced DataGrid features, like the column groups and style functions.

Please note, some things may be repeated from other example explanations, but the goal is to give you a complete picture in the setup of each example.

Key Points to notice are:

Basic Markup for the Grid (We’re going to focus on the Flexicious specific markup):

• enableFilters -This makes the filter row visible
• enableCopy - This makes the context menu options for Copying cell, row and table data visible.
• enableFooters  - This makes the footer row visible
• enablePaging - This makes the DataGrid Paging row visible. It also initializes the default implementation of the com.flexicious.controls.interfaces.IPager interface, which is implemented by the built in Pager control. You can implement your own, please see the Server Bound Classic or Advanced Datagrid sample
• pagerPosition - The default implementation of the IPager Control lets you customize where the pager would appear, left right or middle. If you implement your own pager, you would need to support this if you need the this functionality.
• sortField - This is the field your data is sorted by when it is initialized. This is used by the Grid to draw the sort Icon on initial load.

The Select All CheckBox Column :

This is a class provided by the Flexcious framework (com.flexicious.grids.columns.SelectAllCheckBoxHeaderColumn) to enable the “Select All” functionality. It basically utilizes the Flex itemRender and headerRenderer support to create a Select All Tri-State CheckBox in the header, and multiple “Row Select” check boxes in the grid. The properties to note are:

• selectedKeyField: This basically is the field you want to appear in the selectedKeys collection of the grid when the user selects something in the list. It is not required, if you just want to use the selectedObjects property on the DataGrid.

The Individual Filterable columns :

• Employee Id column

1. filterOperation - This the the operation used to compare the value in the filter text box against the value of each item in the grid to see if it matches the filter criteria
2. filterControl - This is the actual control used to filter. In this case we used a TextInput.

• First Name Column - Similar to the Employee Id column, except we’re using a BeginsWith search as opposed to a Contains search.
• Last Name Column - Similar to First Name
• Department Column-  Similar to the others, but, here we are using the MultiSelectComboBox filter control, in combination with the filterComboBoxBuildFromGrid property, which makes builds the combobox on basis of all the distinct values of the department property of the Employee Objects. We also use the filterComboBoxWidth property to set the width of the dropdown, which defaults to the width of the column.
• Phone column -  Similar to First Name/Last Name, except we’re using a Contains Search.
• Active column -  This is a boolean search, so we use a TriStateCheckBox to apply a filter.
• Hire Date Column -  Here we utilize the DateComboBox for a Date Range DataGrid Filter. We have set what ranges we want to search on, based on values in the com.flexicious.utils.DateRange by using the filterDateRangeOptions property. We are also utilizing the “count” footerOperation, in combination with footerLabel and footerOperationPrecision properties, to set the value, label, and the precision of the footer.
• Annual Salary Column - Here we utilize the Numeric Range DataGrid Filter, by specifying filterControl =”NumericRangeBox”