# 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](https://wiki.brixxbox.net/index.php/App_StdSqlEditor).

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](/brixxbox-documentation/client-api-reference/controls/datebox.md) and [DateTimeBox](/brixxbox-documentation/client-api-reference/controls/datetimebox.md)) 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](/brixxbox-documentation/client-api-reference/tips-and-tricks/date-and-time/the-moment.js-library.md) is used to set start and end dates):

```javascript

//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);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://brixxbox.gitbook.io/brixxbox-documentation/configuration/app-editor/app-editor-properties/gridcolumnfilter.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.