• State Code RadioButtonList - This demonstrates usage of a flexicious RadioButtonList control. We set its dataProvider property to a collection of States (we could have set the labelField and dataField too if required), We specify the searchField property to notify the framework that we need to search on that field. In addition, we specify the filterTriggerEvent property to “none”. The default for this is “change”, which will trigger a search everytime the user changes the value of this field. If this is what we wanted, we may choose to leave that as the default, but in this case, we want the search to trigger only when the user specifies all the search criteria and finally clicks the search button.
• Department CheckBoxList - Similar to above, but we specify an additional property, allowMultipleSelection to true, which allows the user to pick multiple values in this field.
• First Name TextInput: Basic text input search field, with the filterOperation set to “BeginsWith”
• Last Name AutoComplete - The Autocomplete is NOT provided as a part of the Flexicious SWC, it is just being used here to demonstrate how you may use your own implementation of IFilterControl. For this, we just used ADOBE’s autocomplete implementation within our filtering infrastructure. (com.sample.examples.support.AutoComplete). All we’ve done is instead of inheriting it from mx.contorls.ComboBox, we inherit it from com.flexicious.controls.ComboBox. This makes it Flexicious enabled.  We added a few minor tweaks in com.sample.examples.support. MyAutoComplete, and now it can be used as a grid embedded or detached filter control. If you run the example, you will notice that the LastName field is an autocomplete, bound to the employees collection, with its labelField, dataField and seachField set to “lastName”.
• Phone Number TextInput - Basic text input search field, with the filterOperation set to “BeginsWith”
• Salary Range Slider - Here we implement our own custom filter control – the SalaryRangeSlider, available with the sample. All we have to do is to implement the include the provided FilterInclude.as file, and implement a couple of specific properties from the com.flexicious.controls.interfaces.filters.IRangeFilterControl. This tells the filtering mechanism to search for the values between the two values specified by the range filter.(The DateComboBox is also a IRangeFilterControl).
• Hire Date ComboBox -  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 also set an additional property, addAllItem, which adds the “All” item to the list of values in the dropdown.
• Any Field TextInput - This field does a simple contains search on the Employee object’s “details” property. This property in turn enumerates all the fields that we want to search on when the user searches using the “Any Field” option.
• The Search Button - When the user clicks the button, we call the grid.processFilter(). This in turn fires the filterPageSortChange event, which is handled by the onFilterPageSortChange function. This function is called right before the filter for the grid is run, so we add our criteria from the detached seach section to the list of crtieria from the grid. The end result is that the combination of all the criteria is applied as a final filter.
• The Clear filter Button - We simply call the grid.clearFilter (to clear out the filters embedded inside the grid, and searchPanel.clearFilter (to clear our the detached search fields) and then call a processFilter, so a blank filter is run, which should ideally return all the records.

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 implemenation 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 functionailty.
• 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.
• pageSize - This is the size of the page. It is used to setup the paging control, as well as by the server to create the query.
• filterPageSortChange (Event) -  Since we have a detached filter here, right before the Grid runs it’s filter, we want to append the detached filter criteria to it. We do this in the filterPageSortChange event..

• The Details Column - This column does a simple contains search on the Employee object’s “details” property. This property in turn enumerates all the fields that we want to search on when the user searches using the “Any Field” option. 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.
• The Link Column - Here we are utilizing the clickBehavior property to “clickPopup”, in combination with the clickPopupClass property and the linkText property. This renders the value specified in the linkText property as a link, which when clicked, launches the popup class specified in the clickPopupClass property and calls a method called “show(val:Object)” on it, where val is the object bound to the row that was clicked.

The Employee Pop-up :

• This control demonsrates how to use the Flexicious Databinding Framework. Although this is a very small part of the overall API, it is very powerful and can eliminate a lot of manual “wiring” or “plubimg” code in routine scenarios.

Individual databound controls :

• State Code RadioButtonList - We set the dataProvider property to the list of all States, the bindingSource to be the employeeObject, and the bindingProperty to be the “stateCode”. This is all that was required to:

1. Populate the list with the list of states
2. Select the State that the employee belongs to onCreationComplete.
3. Update the StateCode of the employee when the user changes the value and you call applyChanges on the container.

•  Department ComboBox - Similar to above, for the department association.
• The First Name, Last Name and Phone Number Text Boxes - Similar to above, we simply set the bindingSource and bindingProperty options to enable bidirectional databinding.

• The Save Button - We simply call the bindingContainer’s appplyChanges method, which applies the current values from each of the databound controls to the associated properties on the binding soure object (In this case, the employee object).