Newly released!! DataGrid component for REACT: http://reactdatagrid.com
Show/Hide Code


 

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

 

 

Summary :

This example demonstrates the usage of Flexicious in its most basic form. It shows the usage of the grid to perform:

  • DataGrid Paging
  • DataGrid Filter
  • DataGrid Sorting
  • DataGrid Select All CheckBox Column
  • Customization of the DataGrid Filter Row
  • Customization of the DataGrid Pager Row


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 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.

 
The Select All CheckBox Column :
This is a class provided by the Flexicious 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-  Similar to the others, but, here we are using the MultiSelectComboBox filter control, in combination with the filterComboBoxBuildFromGrid property, which makes builds the combo box 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.
  • Annual Salary Column - Here we utilize the Numeric Range DataGrid Filter, by specifying filterControl =”NumericRangeBox”