Grid Toolbar Specification

Grid Toolbar Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. ARIA support
5. Assumptions and Limitations
6. Test Scenarios
7. References

Objectives

Provides a centralized location (toolbar) for grid-related UI controls.

2. User Stories

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 but the content may wrap.
• 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 set H/ material 64dp card header height
• 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) it

As an end user, I want to:

• interact with the UI in the toolbar area and control/configure the associated grid features.

Acceptance criteria

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

...

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End User Experience

3.2. Developer Experience

• enabling the toolbar and setting a title

<igxGrid [showToolbar]="true" toolbarTitle="Some title">
</igxGrid>

• enabling exporting button

<igxGrid [showToolbar]="true" [showToolbarExportExcel]="true" [showToolbarExportCsv]="true">
</igxGrid>

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. User Interface

Include a diagram linking the elements with the visual representation of the feature

3.5. Navigation

3.6. API

Options

Name	Description	Type	Default value	Valid values

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters

4. ARIA Support

Specify only if applicable

5. Assumptions and Limitations

Assumptions	Limitation Notes

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

7. References

https://material.io/guidelines/components/data-tables.html#data-tables-specs