Grid Toolbar Specification

Owned by

CodeX - Diyan Dimitrov

Requires approval from

Peer Developer Name | Date:
Stefan Ivanov | Date:

Signed off by

Radoslav Mirchev | Date:
Platform Architect Name | Date:

Revision History

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
2.0	Stefan Ivanov	Jul 6, 2020	Adding improved stories and UI for exporting & updating spec template

1. Overview

The IgxGrid's toolbar is located at the top of the IgxGrid matching its width and contains controls that trigger grid-related functionality.

Objectives

The IgxGrid's toolbar is used to provide a centralized location for grid-related UI controls. End-to-end user experience

Acceptance criteria

Must-have before we can consider the feature a sprint candidate

...

2. User Stories

The toolbar has to provide flexible and templatable toolbar area where developers can layout components for various functionalities, while at the same time give the end-user a consistent, meaningful and predictable experience while interacting with it and the rest of the grid

Developer Stories

Story 1: 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.
Story 2: As a developer, I want to have the width of the toolbar equal to the width of the grid(+scrolls) so that the two behave consistently when resized.
Story 3: As a developer, I want the toolbar not to be scrollable even when the grid has horizontal scrollbars so that all functionalities it contains are always visible.
Story 4: As a developer, I want to have a default template with right-aligned buttons according to the features enabled on the grid (column hiding, advanced filtering, exporting to excel, exporting to CSV...) so that if I instantiate a toolbar it is not showing empty.
Story 5: As a developer, I want to be able to specify a title that will be left-aligned, so that I can use it for naming the grid e.g. "Produce Orders".
Story 6: As a developer, I want to be able to access all textual content of the toolbar's controls(buttons) and be able to change(localize) them, so that I can support multiple languages.
Story 7: As a developer, I want to have a threshold with which to delay any visuals and animations for operations expected to take a while, so that if finish almost instantaneously there are no observable, visual glitches.

End-user Stories

Story 1: As an end-user, I want to interact with the UI in the toolbar area and trigger the associated grid features, so that I can display the grid in the way I need.
Story 2: As an end-user, I want to be able to interact with the grid even if some actions triggered by the toolbar are taking longer than others e.g. exporting a large set of data so that I am not stuck waiting for them to complete.
Story 3: As an end-user, I want to 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, so that I know something is in progress and can note once it is finished

3. Functionality

The toolbar should:

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

3.1. End-User Experience

The UI of the toolbar contains 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 the user needs to have Comfortable Search Input, it is recommended to be put outside of the 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. The progress bar uses (secondary,500) without stripes.

3.2. Developer Experience

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>

3.3. Globalization/Localization

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

3.4. Keyboard Navigation

3.5. API

Options

Name	Description	Type	Default value	Valid values

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters

3.6. Sample Design

4. Test Scenarios

Automation

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 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 no content specified
The custom content container should be present when custom content is specified and should contain the content in question.