PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
Range component
The Range component implements the range for filtering rows in a grid. Visually, this component represents two input fields of date or text type, for entering the “from” and “to” range limits.
Configuration options
| Option | Description | Type | Default Value |
|---|---|---|---|
class |
Path to the PHP class responsible for the backend implementation of the component. | String | Magento\Ui\Component\Filters\Type\Range |
component |
The path to the component’s .js file in terms of RequireJS. |
String | Magento_Ui/js/grid/filters/range |
isRange |
Defines range filter. | Boolean | true |
rangeType |
Defines what kind of input elements the range contains. For example, if the value is date, then range includes two date fields. |
String | - |
template |
Path to the component’s .html template. |
String | ui/grid/filters/elements/group |
Source files
Extends Multiline:
- app/code/Magento/Ui/view/base/web/js/grid/filters/range.js
- app/code/Magento/Ui/view/base/web/templates/grid/filters/elements/group.html
Examples
DateRange
This is an example of how to add a date range filter type:
1
2
3
4
5
6
7
8
9
10
<listing>
<columns>
<column name="period">
<settings>
<filter>dateRange</filter>
<label translate="true">Period</label>
</settings>
</column>
</columns>
</listing>
Result
TextRange
This is an example of how to add a text range filter type:
1
2
3
4
5
6
7
8
9
10
<listing>
<columns>
<column name="size">
<settings>
<filter>textRange</filter>
<label translate="true">Size</label>
</settings>
</column>
</columns>
</listing>
Result
Methods and events
The following API methods are available:
buildChildren()- create a configuration for the child components.clear()- clear child elements data.hasData()- check if some children element has data.