Skip to content

Grid Toolbar Specification

Danail Marinov edited this page Jun 13, 2019 · 18 revisions

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

The IgxGrid's toolbar is located at the top of the IgxGrid matching its size and contains other grid-related controls.

Objectives

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

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

End user

As an end user, I want to:

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

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

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
You can’t perform that action at this time.