-
Notifications
You must be signed in to change notification settings - Fork 160
Grid Toolbar Specification
Version | User | Date | Notes |
---|---|---|---|
0.1 | - | - | Initial Draft |
0.2 | Danail Marinov | Jun 12, 2019 | User Interface Update |
0.3 | Danail Marinov | Jun 13, 2019 | Update Dev stories and Display Density |
The IgxGrid's toolbar is located at the top of the IgxGrid matching its size and contains other grid-related controls.
The IgxGrid's toolbar is used to provide a centralized location for grid-related UI controls.
As a developer, I want to:
- enable the igxGridToolbar and have it positioned above the grid column/multicolumn headers so that the user would know that the interactions apply to all below the toolbar.
- have the width of the toolbar equal to the width of the grid(+scrolls)
- have the toolbar not scrollable
- have right-aligned buttons according to the features enabled on the grid (column hiding, advanced filtering, exporting to excel, exporting to CSV...)
- be able to specify a title which will be left-aligned
- be able to access all textual content of the toolbar's controls(buttons) and be able to change(localize) them
- have a threshold of ...ms that delays any visuals for expected long operations in case they finish almost instantaneously
As an end-user, I want to:
- interact with the UI in the toolbar area and control/configure the associated grid features.
- be able to interact with the grid even if some actions are taking longer than others e.g. exporting a large set of data
- have a clear visual indication if actions are not instantaneous e.g. exporting a large grid should show an indeterminate progress bar for as long as the exporting is running
- have a toolbar title
- have a column hiding button showing how many columns a currently hidden
- be able to access the column hiding feature popup after clicking on the column hiding button
- have an export button to access the exporting feature
- be able to access the exporting popup with exporting options after pressing the export button
- enabling the toolbar and setting a title
<igxGrid [showToolbar]="true" toolbarTitle="Some title">
</igxGrid>
- configuring column hiding feature
<igxGrid
[showToolbar]="true"
[columnHiding]="true"
hiddenColumnsText="Hidden"
columnHidingTitle="Column Hiding"
>
</igxGrid>
- configuring exporting feature
<igxGrid
[showToolbar]="true"
[exportExcel]="true"
[exportCsv]="true"
exportText="Export"
exportExcelText="Export to Excel"
exportCsvText="Export to CSV"
>
</igxGrid>
The components used in the toolbar does not have any predefined text labels. There are properties for configuring all textual content of the toolbar.
Describe any special localization requirements such as the number of localizable strings, regional formats
The End User interface of the toolbar contain UI controls used to configure the IgxGrid's features. The toolbar has fixed-height Display Density variations. The UI components nested in the toolbar may not inherit Grid's Display Density. For example Grid and Toolbar in Comfortable Display Density would have Search input in Cosy. If user needs to have Comfortable Search Input, it is recommended to be put outside of grid, as it is shown in this sample: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/search.html
When triggering an export of the grid via the toolbar, the export button should become disabled and an indeterminate, linear progress bar without value label should appear at the bottom of the Toolbar and run for as long as the export is taking before re-enabling the button. The button and linear progress respect the display density of the grid i.e. progress bar is 100% of the toolbar width and its bottom always matches that of the toolbar.
Sample:
Name | Description | Type | Default value | Valid values |
---|---|---|---|---|
Name | Description | Return type | Parameters |
---|---|---|---|
Name | Description | Cancelable | Parameters |
---|---|---|---|
- The toolbar should be visible only when it is enabled using the
showToolbar
property - The toolbar's title should be visible only if a value is set on the
toolbarTitle
property - The toolbar's column hiding button is visible only with the
enableColumnHiding
property is set.- Clicking on the toolbar's column hiding button opens the column hiding popup
- Continuous clicking on the toolbar's column hiding button toggles the column hiding popup visibility
- The number of hidden columns in the column hiding button's text should match the hidden columns in the igxGrid
- The toolbar's export button should be visible only if one of the exporting buttons are enabled
- The toolbar export button's drop down should be visible when clicking on the export button
- Continuous clicking on the The toolbar export button toggles the export drop down visibility
- The CSV export button should be visible only if the
toolbarExportCsvButton
is set - The Excel export button should be visible only if the
toolbarExportExcelButton
is set - Clicking on the CSV export button emits an event
- If this event is not canceled an export operation with default parameters is initiated
- If this event is canceled the export operation is not initiated
- Clicking on the Excel export button emits an event
- If this event is not canceled an export operation with default parameters is initiated
- If this event is canceled the export operation is not initiated
- The custom content container should not be present if there is not content specified
- The custom content container should be present when custom content is specified and should contains the content in question.
https://material.io/guidelines/components/data-tables.html#data-tables-specs