Skip to content

Grid Toolbar Specification

Stefan Ivanov edited this page Jul 7, 2020 · 40 revisions

Grid Toolbar Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Accessibility
  5. Assumptions and Limitations
  6. References

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

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

V3-Hands-off

V3-Sample

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:

V3-Sample-2

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.

References

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

Clone this wiki locally