Flexicious Server Bound Advanced Flex DataGrid (With a .NET/ADO EF/FLUORINE/IIS/MSSQL Backend using Flex Remoting)

Summary :

This example demonstrates the usage of the Flexicious Flex DataGrid with filterPageSortMode=”server”.

This basically implies, that whenever a sort, filter or paging operation is triggered by user action, instead of the grid trying to do the sort/fillter or paging operation on the data currently in the dataProvider ArrayCollection, it will instead trigger an event the filterPageSort, which should be handled by your code. In this example, we use the Flex Remoting Framework with the mx:RemoteObject tag to send a request to the server ( Which is a .NET/ADO/Fluorine/IIS backend, which in turn convers the Flexicious Filter into a Entity Querty Language (EQL) query, which is sent to the MSSQL database. Please note, that we have a basic implementation that should handle most scenarios, but in certain cases, custom coding might be necessary.

Please download the trial, it includes the .Net/C# code, as well as the Spring/Hibernate and Java Code.

This example demonstrates :

• Advanced DataGrid Paging (Server)
• Advanced DataGrid Filter (Server)
• 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
• Integration of the Flexicious Grid with a ADO.NET/HQL/Fluorine/IIS backend. 
• Use of the MyFilter.as class to send the Flexicious Filter for processing by the backend (The MyFilter.as maps to MyFilter.cs in the .NET source)

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 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 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.
•  pagerRowHeight - This sets the height of the pager row. It defaults to the row height, but we increased it in this example because the custom Paging Control that we implemented is a little taller than the out of the box paging control provided by Flexicious.
•  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 Hibernate Query.
•  filterPageSortMode - This property defaults to “client” but we override it in this example, because we want the Filter, Page and Sort operations to go to the server to fetch the corresponding page of data.
•  pagerRenderer - This is typically only required if you are planning to implement your own pager control. We have a custom implementation in this example, the CustomPagerControl.mxml which implements com.flexicious.controls.interfaces.IPager interface. As long as your control implements this interface, the Grid will be able use it to render the Datagrid paging row.
•  filterPageSortChange (Event) -  Since this grid has filterPageSortMode=”server”, this means that we need to send each filter, page and sort request to the server. We use the filterPageSortChange event to accomplish this.We wrap the Flexicious Filter in the MyFilter.as class, which we then send to the server with the filter criteria.
• filterRowHeight - We increase the height because we have a custom filter control (The Salary Range Slider – see below) that is a little taller than the other controls.

 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

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

1. searchField - We are setting this property because we’re dynamically generating the EQL on the server. What this does, is that whenever the user searches for the department by choosing one or more in the list, it tells the server, we need to search the value of the “department.departmentId” Entity mapped property for the values that the user selected. Please note, this is not requried if you are manually inspecting the filter properties on the server, as opposed to using the dynamic query generation. Please see the C# Code for an example of both.
2. sortField - Similar to searchField, if we want to dynamically create the sort criteria.
3. filterRenderer - We’re using this here because we want to initialize the Filter Renderer with a bunch of overridden properties, like the labelField, dataField, dataProvider, dropdownWidth. We also added a rendererStyleName property, if you want to apply a custom style to the generated renderers.
4. dataProvider - We bind the filter dropdown value to a list of departments retrieved from the server (_serverDepartments). Please note, that when the departments are retrieved from the server, we need to redraw the filterRow like such : grid.filterRow.redrawFilters();

•  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.
• Annual Salary Column  - 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. We also utilize the footerLabel property. Since this is a server bound grid, the client has no idea how many records match the user’s search critieria. So, we use the _totalRecords bindable variable to set this value. Please note, when we set this varible, we need to redraw the grid’s footers like such: grid.footerRow.redrawFooter();

Creation Complete Event :

• We fire off the event to fetch the first page of data, and also the list of all available departments.

onEmployeesResult event :

• This is the event that is fired by the flex remoting framework when the list of employees returns from the server. We bind this list to the dataProvider property of the Flex Grid. We call the redrawFooter to update the count that is returned by the server.

onDepartmentsResult :

• This is the event that is fired by the flex remoting framework when the list of deparments returns from the server. We bind this list to the dataProvider property of the MultiSelectComboBox that is being used inside the grid’s Department Column’s filter renderer. We also call refresh layout, which will resize and rebuild the header row based on new data.