Filtering Row
| Version | User | Date | Notes |
|---|---|---|---|
| 0.1 | Danail Marinov | - | Initial version of the specification |
| 0.2 | Danail Marinov | Apr 3, 2019 | Update concerining Filtering Input |
| 0.3 | Danail Marinov | Dec 2, 2019 | Update Responsive Versions |
The filtering row is UI that exposes an input and default filtering condition, for each column it has been enabled on, to the end user. The filtering row reads and modifies the collection of igxGrid filtering conditions, and reacts to changes in the filtering conditions. Each filter in the filtering row reacts when filtering condition/s has been set externally for its corresponding column. The filtering row exposes to the end user a subset of filtering operations that can be applied to the whole grid. The filtering row should replace the current column filter, but should not limit or reduce its functionality, and should enable us to take back the space taken by the filtering icon in each column header for other usage - e.g. Operations UI. The filtering row is not exclusive to a feature-rich grid query UI (advanced filtering UI) and also such other UI should not be exclusive to the filtering row.
As an end user I want to filter the data (simple filter - contains).
As an end user I want to filter data on one or more data containers.
As an end user I want to choose the filtering condition.
As an end user I want to put multiple filtering conditions in a single column.
- Is empty
- Is not empty
- Is null
- Is not null
- Contains (default)
- Starts With
- Ends With
- Does Not Contain
- Equals to
- Does Not Equal to
- Equals to (default)
- GreaterThan
- LessThan
- GreaterThanOrEqualTo
- LessThanOrEqualTo
- Between
- Does not equals to
- All (default)
- True
- False
- Equals (default)
- Before
- After
- Between
- Today
- Yesterday
- Tomorrow
- This month
- Last month
- Next month
- This year
- Last year
- Next year
As an end user I want to type in the term to the filtering operation in an input.
As an end user I want to apply my filter immediately.
As an end user I want to be able to quickly clear my filter (via a clear button in the input field)
As an end user I want to be able to input only allowed characters for the filter term that apply to the data container (input is masked according to the data container)
As an end user I want the filter to persist after any other operations - paging, grouping, sorting etc.
As an end user I want to be notified if the filter has no results.
As a developer I want to constrain the user to filter only certain columns.
As a developer I want to have a default filtering condition set by corresponding types e.g. the first condition for number = Equals / string = Contains etc.
As a developer I want to be able to programmatically set filtering conditions that override the default ones.
As a developer I want to have preset option for the type of filters that I can apply on data (numeric, string, boolean)
As a developer I expect that if I specify a complex filtering expression through the API or the end-user creates one through advanced filtering mechanisms e.g. (A and B) or (C and D) the filter row cannot be shown for such a column as it can neither define nor visualize such complex filtering expressions.
In terms of the grid: I want to apply filtering as a filtering row.
I want to apply filtering on the entire grid.
As a developer I want to create custom filtering conditions.
As a developer I want to provide custom filtering strategy.
As a developer I want to provide a filtering strategy that filters the values based on their formatted values.
The user journey starts from Idle state where no filter are applied on the filter row.
As an end user, before applying any filters, on idle state I can see on which columns filters can be applied. The columns on which filters can be applied include transparent (ghost) chip labeled "+Add filters". The chip set can be cropped if the column width is too small. The ghost chips are left aligned keeping the same padding as the column labels.
When the user opens the dropdown menu for first time, there is a preselected condition. As to the input, that is reflected only on the icon, while the placeholder text always informs the user that after selecting condition has to type input value. If the user closes the dropdown using ESC, he can open it again (if the focus is on the condition icon) using SPACE or ENTER.
Here are shown both selected and focus state, e.g. when the user has selected a condition and then navigates through the dropdown with the keyboard arrows.
Here is shown the case when the user has selected a condition, closes the dropdown, then opens it again for re-edit and the dropdown displays initially user's previous selection.
As an end user, I want to apply filter on e.g. Subject column. I can trigger the filter-row edit mode by clicking on the transparent chip with the mouse or by going to the cell that belongs to the filter row and is below the Subject header cell by using the keyboard and pressing ENTER. Triggering the filter row edit mode includes visual change to the Subject column header cell and the whole filter row. These two cells are visually consistent and unified. The filter row extends and overlaps all other cells along the filter row till reaching the both ends of viewport of the grid (that reflects even if horizontal scrolling is available). Meaningful animation (e.g. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1RJ1TKFFa6qwYLHOlmSvCvBguYlHGSUiM%2F01-tweening.mp4) with base point starts from the filter row cell on focus. After activating the filter row edit mode, an placeholder input value is placed. Initially the dropdown representing the condition (on the prefix of the input) is showing the possible conditions that can be applied for that type of data. The selection is on the first option of the list which is reflected also on the prefix icon of the input. The RESET button is disabled. CLOSE button in the right end of the filter row closes the EDIT mode of the filter row and DO NOT reset the filter row or remove the changes applied so far by the user.
After selecting condition with the keyboard arrows and confirming with ENTER, the focus moves to the input value. It is being visualized chip only after typing at least one character (or in other words - chip with only selected condition without input value is not being visualized). When typing, the input value appears both in the input and in the chip, but typing cannot be performed in the chip. The X icon in the right end of the input removes the typed value, while the X icon in the chip removes the whole chip. The Checkmark action icon is for confirmation that the filtering is completed; confirmation can be done also with Enter, if using the keyboard. If I, as an end user, confirm end of editing of a chip without having typed any input value (even if there is condition selected), then chip is not displayed because chip without input value cannot be displayed. If I, as an end user press Alt+Arrow Down while the input is focused, 2. will prompt the condition icon to be focused and dropdown will open. After typing input value, the RESET button goes from disabled to inactive. Confirmation is performed by ENTER.
If the condition is Null which does not let the user type input value, the input value displays as a placeholder only text "Null" and that text cannot be edited by the user. The filter chip also displays both the Null icon and text "Null".
After confirmation, the focus is moved again to the condition selection at the prefix of the input. The previously edited chip goes from EDIT mode to IDLE state.
After confirming by pressing ENTER, the focus moves to the input value of the input. In addition, second chip in EDIT mode and AND selector before it appear.
If as a user, I want to have only one filter, I can close the EDIT mode of the filter.
If I, as an end user, want to edit the AND/OR selector, I can navigate there by the keyboard or mouse and edit it. By default, the AND/OR selector is set to AND value. Edit of AND/OR selector can be done always when the filter row is in EDIT mode. The AND/OR selector is represented by flat button with chevron icon because it opens a dropdown list.
After confirming selection of the condition, again the focus moves first to the condition, then - to the input value.
If I, as an end user, want to add filter to another column, I can just select another column (even while being in EDIT mode for another column). When going into EDIT mode for another column, the changes made so far for the previous column, apply live and stay saved. After closing EDIT mode, all applied so far changes stay saved and active.
After closing the EDIT mode of the filter row, it changes to VIEW mode and adopts the colors from the header. There are no visual changes of the style of the applied filters, but there are changes of the AND/OR selector, which significantly smaller in order to save space. If the width of the column is too small and does not let all filters to be visible, we have two cases:
- in the first case we can place at least one filter fully, after that is placed VIEW MORE icon which indicates that there is hidden filters and/or conditions; clicking on VIEW MORE icon enters EDIT mode for that column and puts focus on the first filter chip. Clicking on the visible full filter chip also enters EDIT mode for that column.
- in case that there are more than one visible chips in VIEW MODE and, for example, the user selects the second chip, then he enters EDIT mode with focus on the second (the selected) chip.
- in case the grid column is so narrow, that it does not let even one filter chip to be fully placed or less than the half of the chip - in that case only VIEW MORE icon (filter icon plus badge with digit indicating not visible filters) is displayed ; AND/OR condition cannot be placed cropped; if the user enters EDIT mode of selected column by clicking on the filter chip, all filters are being revealed, despite in VIEW mode some are totally hidden. After going to EDIT mode:
- the focus will be on the filter chip that the user had selected in VIEW MODE (of course, if filters were visible in VIEW MODE);
- the focus will be on the first filter chip if the user selects the VIER MORE icon; If I, as an end user, want to edit some of the chips that has been added, I can select it either navigating with TAB, then ENTER or selecting it directly with the mouse. Then the filter row goes to EDIT MODE and the selected chip goes to FOCUSED AND SELECTED STATE. If I navigate with TAB, then select VIEW MORE icon with ENTER or use the mouse to select VIEW MORE icon, it transforms the filter row from VIEW to EDIT MODE with focus on the first chip.
RESET option turns all changes back to idle state.
When moving through the filter row, the added filter chips may take idle (e.g. chips 1 and 3) or focus state (example chip 2).
If I, as an end user, want to re-edit chip that has already been added (the chip goes to FOCUSED AND SELECTED STATE), I have to select it or navigate with TAB/SHIFT+TAB to reach it and after it is focused, I have to click ENTER. Then, its current settings, such as the condition and the input value, are applied to the input in the left side of the filter row. When I finish editing the filter chip and confirm it with ENTER, the focus is moved on the dropdown for selecting condition for a new chip filter.
Here are shown the cases when having grid row selection (e.g. GroupBy case) both in View and Edit mode.
Default:
Narrow (below 432px):
The row filtering should respect the grid display density out of the box, adjusting its row height to match the grid row height accordingly and tweaking components that reside in it e.g. buttons, and chips when necessary. This should affect both the rest state with chips in the header and the active state with an editable filter row on top of it. Only the input does not behave well and we may need to scale it down to 46, 36 and 28 px high for the respective densities.
Automation
- One or more conditions can be applied to a single column:
- number column;
- string column;
- date column;
- Two or more conditions can be applied to two columns at once
- After filling the first condition the grid is filtered, then after adding the second condition the grid is updated
- Clicking Reset button clears all conditions for column
- Selecting a chip, shows the edit row and the clicked chip is selected.
- Should render initial "+Filter" chip for each filterable column and render empty cell for a column when
filterableis set tofalse - When scrolling horizontally it should update cells correctly so that under the
filterablefalse column would be always empty cell. - Clicking on the "+Filter" chip should show filter row on top of the filtering header cells for the correct column type.
- Opening the filter row and changing the current column by just clicking on another header without closing the filtering row should update the input and drop-down for filter expressions
- When applying a single filtering condition the grid should immediately apply filter while the filtering row is still opened.
- When applying multiple filtering condition filters the grid should immediately apply filters while the filtering row is sill opened.
- Should render navigation arrows in the filtering row when there are too many conditions (chips) to fit inside it and they should be focusable.
- Filter conditions drop-down items should be correct for each column type.
- When Read-Only condition (like Empty, Null etc.) is selected the related input should be read-only, chip should be created and condition should be applied.
- When condition that requires input is selected, focus should move to the input and after typing a value the filter should be applied and a chip should be created.
- When filter chip is removed from header the related filter should also be removed from the grid.
- When filter chip is removed from inside filter row the related filter should also be removed from the grid.
- When typing a value in the input and then removing it the chip should stay and clicking on the "Close" button should remove it and render "+Filter".
- When AND/OR operator is changed the filter result should reflect the change.
- Reset button should be enabled when there are applied conditions for the current column and disabled when there are none.
- Should allow setting initial filtering conditions via the filteringExpressionsTree option.
- Filtering via the API should update the UI.
- When multiple conditions are applied but column width is too small to display all chips 'View More' icon should be displayed with the number of chips that don't fit in the header.
- Adding two conditions to a single column through API correctly updates the filter cell
- Clearing filter through API clears UI too.
- Should allow setting a custom filter via the column
filtersinput.
- When row selectors are enabled the header checkbox should not be hidden behind the filter row.
- When there are grouped columns the header expand/collapse icon should not be hidden behind the filter row.
- When grid has multi-column headers the chips and the filter row should be correctly positioned.
- When grid has multi-column headers and a multi-column header is hidden/shown the chips and the filter row should be correctly positioned.
- When a column is resized so that some of its chips are no longer visible a 'view more' icon should be displayed with the number of chips that don't fit in the header.
- When a column is resized while filtering row is rendered for the same column should resize correctly and not throw errors.
- When column with filtering conditions is resized so that more chips can be displayed in the header, the related chips should be rendered in the header instead of the 'view more' icon.
- When column is moved its related chips should also be moved with the column and when adding new filters the filter row data should be for the correct column.
- After pinning a column filter chips should remain under their correct columns.
- When a column is hidden no filter cell should be displayed for it in the header and in the row filter UI.
Manual
- Should allow filtering on touch only environment.
- Should allow editing/adding/removing filters via keyboard navigation.
- Should scroll horizontally the chips in the filtering row when they are too many to fit using the arrows.
- When there are pinned columns the filter row should be displayed correctly over the pinned area.