Grid header filter custom options: DHX-5218 - #145
Open
mafanya23 wants to merge 6 commits into
Open
Conversation
[add] updates for v9.3.9
[update] add Excel export fix to v9.3.9
[add] what's new for v9.3.10
- document the `options` property of `filterConfig` for selectFilter and comboFilter in the Grid configuration guide - cover both forms (a static list and a callback function), the option format, the id vs formatted value caveat, and the behavior notes - add the `selectFilter` config properties block the guide was missing, and list `options` among the comboFilter properties - extend the column `header` API page: `TOption` in the usage block, `options` in `filterConfig`, and a `selectFilter` group in the parameters table - link the related snippet sample Release notes for v9.4 are left to the parent version branch.
- replace passive constructions with Grid as the explicit actor
("the list is built" to "Grid builds the list", and 7 more)
- make the recalculation trigger list parallel and active
("on calling setColumns()" to "when you call setColumns()")
- declare the `IOption` type that the `options` signature referenced
but never defined, distinct from `TOption` because the callback
never receives bare strings
- clarify that Grid normalizes the list before it calls the function
- fix Grid capitalization, `id` code formatting, and wordiness
mafanya23
commented
Sep 8, 2026
|
|
||
| ~~~jsx | ||
| type TOption = { id: Id, value: string } | string; | ||
| type IOption = { id: Id, value: string }; |
Contributor
Author
There was a problem hiding this comment.
Claude предложил добавить еще IOption. Нужно ли?
mafanya23
commented
Sep 8, 2026
| <td><a href="../../../configuration/#headerfooter-filters"><b>filterConfig</b></a></td> | ||
| <td>(optional) a configuration object for setting the behavior and appearance of the filter. The set of properties depends on the filter type specified in the `content` property: <br><br> - a configuration object for <b>"inputFilter"</b> can contain the following properties: <ul><li><b>placeholder</b> - (optional) the placeholder text in the input field</li><li><b> icon</b> - (optional) the CSS class for the filter icon</li></ul> <br> - a configuration object for <b>"comboFilter"</b> can contain a set of properties:<ul><li><b>filter</b> - (optional) sets a custom function for filtering Combo Box options</li><li><b>multiselection</b> - (optional) enables selection of multiple options, *false* by default</li><li><b>readonly</b> - (optional) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input). The default value of the <b>readonly</b> property depends on the following conditions:<ul><li>the `readonly:true` is set as a default value, if `htmlEnable:true` is set for a column and there is no template specified for a column</li><li>in all other cases, `readonly:false` is set by default</li></ul></li><li><b>placeholder</b> - (optional) sets a placeholder in the input of ComboBox</li><li><b>virtual</b> - (optional) enables dynamic loading of data on scrolling the list of options, <i>true</i> by default</li><li><b>template</b> - (optional) a function which returns a template with content for the filter options. Takes an option item as a parameter:<ul><li><b>item</b> - (object) an option item</li></ul></li></ul> - a configuration object for <b>"dateFilter" (PRO version)</b> can contain a set of properties:<br>Main properties:<ul><li><b>icon</b> - (optional) the CSS class for the calendar icon</li><li><b>placeholder</b> - (optional) the placeholder text in the input field when no date is selected</li><li><b>asDateObject</b> - (optional) determines how the filter processes data for `customFilter` and the `beforeFilter` and `filterChange` events. If *true*, the comparison is performed using Date objects, *false* by default</li><li><b>range</b> - (optional) enables the date range selection mode (from and to), *false* by default</li><li><b>dateFormat</b> - (optional) the date display format (e.g., *"%d/%m/%Y"*). By default, applies the `dateFormat` used for the column</li></ul>Calendar API configuration properties:<ul><li><b>date</b> - (optional) - the initial date opened in the calendar</li><li><b>mark</b> - (optional) - a function for adding custom CSS classes to specific dates </li><li><b>disabledDates</b> - (optional) - a function for disabling the selection of specific dates </li><li><b>weekStart</b> - (optional) - the start day of the week (*"saturday"*, *"sunday"* (default), *"monday"*).</li><li><b>weekNumbers</b> - (optional) - shows week numbers if *true*, *false* by default</li><li><b>mode</b> - (optional) - the calendar display mode (*"calendar"* (default), *"year"*, *"month"*, *"timepicker"*)</li><li><b>timePicker</b> - (optional) - adds the ability to select time, *false* by default</li><li><b>timeFormat</b> - (optional) - the time format (*12* or *24* (default) hours)</li><li><b>thisMonthOnly</b> - (optional) - if *true*, allows selecting dates only within the current month, *false* by default</li><li><b>width</b> - (optional) - the width of the dropdown calendar, *"250px"* by default</li></ul></td> | ||
| <td>(optional) a configuration object for setting the behavior and appearance of the filter. The set of properties depends on the filter type specified in the `content` property: <br><br> - a configuration object for <b>"inputFilter"</b> can contain the following properties: <ul><li><b>placeholder</b> - (optional) the placeholder text in the input field</li><li><b> icon</b> - (optional) the CSS class for the filter icon</li></ul> <br> - a configuration object for <b>"selectFilter"</b> can contain the following property:<ul><li><a href="../../../configuration/#custom-options-of-headerfooter-filters"><b>options</b></a> - (optional) sets the list of the filter options manually instead of building it from the column data. Can be set in one of the following ways:<ul><li>as an array of options, either <code>{ id, value }</code> objects or plain strings (a string becomes both the id and the label of an option). Such a list fully replaces the data-driven one, and the dataset is not scanned for this column at all. Note that the <b>id</b> of an option is the value stored in the cell (the one the filter compares against and passes to <b>customFilter</b> as <b>match</b>), while the <b>value</b> is the label shown in the dropdown. The <b>id</b> must match the stored value, not the formatted one: in a column with <i>type: "number"</i> and a <b>numberMask</b>, the cell holds <i>1000</i> while Grid displays <i>1,000</i>, so the id must be <i>1000</i></li><li>as a function which receives the data-driven list, already normalized to <code>{ id, value }</code> pairs, and the configuration object of the column, and returns the list of options to show</li></ul>If the property is omitted, the list is built from the column data</li></ul> <br> - a configuration object for <b>"comboFilter"</b> can contain a set of properties:<ul><li><b>filter</b> - (optional) sets a custom function for filtering Combo Box options</li><li><b>multiselection</b> - (optional) enables selection of multiple options, *false* by default</li><li><b>readonly</b> - (optional) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input). The default value of the <b>readonly</b> property depends on the following conditions:<ul><li>the `readonly:true` is set as a default value, if `htmlEnable:true` is set for a column and there is no template specified for a column</li><li>in all other cases, `readonly:false` is set by default</li></ul></li><li><b>placeholder</b> - (optional) sets a placeholder in the input of ComboBox</li><li><b>virtual</b> - (optional) enables dynamic loading of data on scrolling the list of options, <i>true</i> by default</li><li><b>template</b> - (optional) a function which returns a template with content for the filter options. Takes an option item as a parameter:<ul><li><b>item</b> - (object) an option item</li></ul></li><li><a href="../../../configuration/#custom-options-of-headerfooter-filters"><b>options</b></a> - (optional) sets the list of the filter options manually instead of building it from the column data, the same as the <b>options</b> property of the <b>"selectFilter"</b> configuration described above</li></ul> - a configuration object for <b>"dateFilter" (PRO version)</b> can contain a set of properties:<br>Main properties:<ul><li><b>icon</b> - (optional) the CSS class for the calendar icon</li><li><b>placeholder</b> - (optional) the placeholder text in the input field when no date is selected</li><li><b>asDateObject</b> - (optional) determines how the filter processes data for `customFilter` and the `beforeFilter` and `filterChange` events. If *true*, the comparison is performed using Date objects, *false* by default</li><li><b>range</b> - (optional) enables the date range selection mode (from and to), *false* by default</li><li><b>dateFormat</b> - (optional) the date display format (e.g., *"%d/%m/%Y"*). By default, applies the `dateFormat` used for the column</li></ul>Calendar API configuration properties:<ul><li><b>date</b> - (optional) - the initial date opened in the calendar</li><li><b>mark</b> - (optional) - a function for adding custom CSS classes to specific dates </li><li><b>disabledDates</b> - (optional) - a function for disabling the selection of specific dates </li><li><b>weekStart</b> - (optional) - the start day of the week (*"saturday"*, *"sunday"* (default), *"monday"*).</li><li><b>weekNumbers</b> - (optional) - shows week numbers if *true*, *false* by default</li><li><b>mode</b> - (optional) - the calendar display mode (*"calendar"* (default), *"year"*, *"month"*, *"timepicker"*)</li><li><b>timePicker</b> - (optional) - adds the ability to select time, *false* by default</li><li><b>timeFormat</b> - (optional) - the time format (*12* or *24* (default) hours)</li><li><b>thisMonthOnly</b> - (optional) - if *true*, allows selecting dates only within the current month, *false* by default</li><li><b>width</b> - (optional) - the width of the dropdown calendar, *"250px"* by default</li></ul></td> | ||
| </tr> |
Contributor
Author
There was a problem hiding this comment.
Добавлено:
И для comboFilter
mafanya23
commented
Sep 8, 2026
|
|
||
| :::info | ||
| The ability to manage the options of a filter manually is available starting from v9.4. | ||
| ::: |
Contributor
Author
There was a problem hiding this comment.
Добавим или оставим только в what's new?
mafanya23
commented
Sep 8, 2026
|
|
||
| ~~~jsx | ||
| type TOption = { id: Id, value: string } | string; | ||
| type IOption = { id: Id, value: string }; |
Contributor
Author
There was a problem hiding this comment.
Здесь тот же вопрос по IOption, нужно ли здесь указывать?
- carry the guide's wording fixes into the column `header` API page, which the previous pass missed: active voice for "Grid does not scan the dataset" and "Grid builds the list", "a callback function" instead of "a function", and `id` code formatting - split the option shape out of the array bullet on the API page into two points for `id` and `value`, mirroring the guide - name `id` and `value` instead of "both parts", which could be read as the pair and the plain string form - state that `option.id` is always defined, the guarantee behind it being safe to compare
mafanya23
commented
Sep 8, 2026
| } | ||
| ~~~ | ||
|
|
||
| - **Columns without `options`.** A column that does not define the `options` property builds its filter list from the data, narrows it on cross-filtering, and reports the displayed text as the filter value. |
Contributor
Author
There was a problem hiding this comment.
Подходит ли такой вариант или лучше описать как Backward compatibility (как описано в задаче)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.