GridColumnFilter

GridColumnFilter

You can create filter in all grid columns. You need to specify the column name and the type of filter you would like for this column.

The following types are available:

• text: Will show a text input field for the search criteria.

• select: A selection for all available options is shown.

• multiSelect: like select-option. It is possible to select multiple entries.

[
   {
       "column":"imImei",
       "filterType":"text"
   }, 
   {
        "column":"imItemId",
        "filterType":"select"
   },
   {
        "column":"imItemGroup",
        "filterType":"multiSelect"
   }
]

If the grid is configured for Server Side Paging additional options are available.

• serverSideMinInputLength: Allows to set a minimum character count for user input, before the search is triggered.

• serverSideSQLStatement : If the filter option is set to select/multislect a SQL statement can be used to show the available options. For config based grids this is optional (A distinct value for the column will be generated by default). For SQL based grids this setting must be provided. The setting needs to have the name of a valid SQL Statement defined in this app.

The SQL statement must return a list consisting of 2 columns: id and text. The id value will be used as the search criteria. The text value will be shown to the user as option. The parameter “columnSerachValue” will contain the current user input.

Example of a valid SQL statement:

DECLARE @searchLike nvarchar(100) = '%' + @columnSearchValue + '%';
SELECT * FROM (
        SELECT 'id1' AS id, 'text1' AS text UNION ALL
        SELECT 'id2' AS id, 'text2' AS text UNION ALL
        SELECT 'id3' AS id, 'text3' AS text UNION ALL
        SELECT 'id4' AS id, 'text4' AS text UNION ALL
        SELECT 'id5' AS id, 'text5' AS text 
        ) AS ResultList
        WHERE text LIKE @searchLike

For columns with date controls (DateBox and DateTimeBox) a date range selection will be provided. The range selection enables the user to set a start and end date. Additionally the brixxApi call 'gridColumnConfig' enables setting of predefined selection ranges. Those ranges can be picked by the user without the need to use the calendar. This way commenly used selctions can be predefined for each individual grid column, if applicable. Example setup for predefined selections (Note: The The moment.js Library is used to set start and end dates):

//Code should be placed as event "onAppStart"

//each entry within 'range' must have an array. First element is start date for
//selection and second the end date. The third array element is an optional string.
//If provided it will show up as tooltip for the selection.
const predefinedSelections = {'range':
    { 'Today': [moment(), moment()], 
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 10 days': [moment().subtract(9, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      '2 years back': [moment().subtract(2, 'years'), 
                      moment().subtract(2, 'years').add(1, 'months'), 
                      '2 years back as start and 1 year and 11 month as end of selection']
     } 
};

brixxApi.gridColumnConfig ('gridName', 'columnName', predefinedSelections);