igxOperationsUIComponent facilitates functions that can be applied on a
igxGridComponent column through a unified interface. The component will provide a dropdown menu containing all the operations available for that column (show/hide summaries, hide column, show filtering, etc). The feature will also be extensible, giving the option to the developer the provide custom options in the menu. Additionally we will provide control over what is shown in the header of any given column.
As an end user, I want:
- to have a single access point to interactions available for a certain column.
- each option from the menu be intuitive as to what it will do.
- each option to execute their function appropriately.
- to cancel the
igxOperationsUIclicking/tapping outside of it.
- to have interactions done through the
igxGridOperationsUIComponentbe reflected on the grid's toolbar when appropriate.
- to have every column hidden by the operations UI be reflected in the grid's column hiding component.
As a developer, I want to:
- to provide my end-users with an intuitive UI for manipulating the data in my grid components.
- to be able to turn the feature on or off on a column by column basis.
- to be able to plug custom options in the operations UI menu.
- to be able to specify what the default UI operation will be when I don't want to show the operation UI.
Operation UI is a dropdown that by default holds the following list of data operations that can be applied on the data grid per column:
- Filtering is pending till Advanced Filtering is developed.
If the user adds just one feature besides sorting (filtering, summaries, group by, moving, pinning, hiding), the column header adds a corresponding icon with predefined interaction.
If more than one feature applied on a column, the more_material icon appears in the header and it toggles menu with the corresponding menulist of features.
The developer can disable features from displaying in the operationsUI. As they can add custom menuitems in it with a provided template.
Customer Number: GroupBy
Name: Pinning, Hiding, GroupBy, Show Summaries
Functions per features:
Filtering from the OpUI toggles Advanced Filtering or Row Filtering(not developed yet), with pre-populated selection for the column. Requires igxGridToolbar Filtering from the Header toggles standard Filtering per Column or Row Filtering (not developed yet).
Pinning from the OpUI / Header Icon pins the column. As it updates the text and icon to UnPin.
Show Summaries from the OpUI / Header Icon displays available summaries for that column. As it updates the text and icon to Hide Summaries.
GroupBy from the OpUI / Header Icon Groups By the column (order of grouping?). As it updates the text and icon to UnGroup. Requires igxGroupbyUI
Hiding a Column from the OpUI / Header Icon updates the Hiding UI in the toolbar. Requires igxGridToolbar
- Have a dropdown menu, which can be displayed with a single click from a toggle inside the grid's column header.
- Have each option in this menu do it's function.
- Be able to extend the options with more custom ones.
- Have a proper integration with the grid's column hiding and toolbar features.
|icon||string||The name of the material icon associated with the option|
|name||string||The name of the option|
|action||function||What the option will do|
Inputs and options
|column||IgxColumnComponent||The column associated with the component|
|girdID||string||The id of the grid associated with the component|
|toggleCSS||string||The css class of the grid's toggle|
|operationItems||IOperationItem||An array containing the allowed options for the column|
|OperationsUI||The default action will be to show the operations UI dropdown|
|Filtering||The default action will be to show the filtering dropdown|
|None||There will be no UI option shown in the grid's header|
Added members to the igxColumnComponent component
Inputs and options
|pinnable||boolean||Determines whether or not the pin option will be shown in the operations UI|
|summarizable||boolean||Determines whether or not the summary option will be shown in the operations UI|
|defaultUIOperation||DefaultUIOperation||Determines what the UI option for this column will be (defaults to operaitions UI menu)|
|customOperationItems||IOperationItem||An array containing the custom actions for this columns, defined by the developer|
- Test that the operations UI toggle is in the header when the feature is enabled.
- Test that the operations UI toggle is not in the header when the feature is disabled.
- Test that each dropdown menu item contains an icon and the name of the option.
- Test that the dropdown menu item does what is expected.
- Test that when a feature gets disabled it is excluded from the dropdown.
- Test that each option does what is expected.
- Test that when the developer provides custom options they are included in the dropdown and each option does what is expected.
- Test integration with the column hiding feature.
- Test integration with the grid's toolbar.
- Test that when setting the column's defaultUIOperation to something other than OperationsUI, the operations UI toggle isn't not present in the column's header.