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

User Stories

Developer

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

End-user

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.

Acceptance criteria

Functionality

End User Experience

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

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>

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

User Interface

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. The progress bar uses (secondary,500) without stripes.

Sample:

Navigation

API

Options

Name	Description	Type	Default value	Valid values

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters

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 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.