Column Actions

Column Actions Component Specification

Contents

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

Revision History

1. Overview

Pinned Column are visible all the time. Horizontal scrolling is applied to the rest of the columns.

Version	User	Date	Notes
0.1	Stamen Stoychev	July 1, 2020	Initial draft

Objectives

Allow users to create a simple dropdown component containing a list of grid columns with checkboxes controlling one of their boolean properties.

2. User Stories

Developer:

• Story 1: As a developer, I want to display a dropdown that contains columns and let the end-user hide them on check.
• Story 2: As a developer, I want to display a dropdown that contains columns and let the end-user pin them on check.

End user:

Acceptance criteria

1. A generic component that ngFor-s a list of items (columns) with checkboxes.
2. A filter field on top of the list that hides items that don't meet the criteria the end user typed in
3. Check all/uncheck all buttons at the bottom.
4. Two predefined directives that provide the specific onCheck/Check All/Uncheck All and the list of columns to display.

3. Functionality

3.1. End User Experience

3.2. Developer Experience

Developers that need to display the igxColumnActionsComponent may do it with the following template:

<igx-column-actions IgxColumnActionsBase></igx-column-actions>

Migration from igxColumnHidingComponent and igxColumnPinningComponent to igxColumnActionsComponent

Current Name	Future Name
disableShowAll	uncheckAllDisabled
disableHideAll	checkAllDisabled
disableFilter	hideFilter
showAllText	uncheckAllText
hideAllText	checkAllText
showAllColumns	uncheckAllColumns
hideAllColumns	checkAllColumns

3.3. Globalization/Localization

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

3.4. User Interface

The component has the following UI:

Note: The button is part of the default igxTooolbar component template

It includes:

1. Title - may be hidden
2. An input used to filter the column list
3. The column list with checkbox the state of which indicates the state of the column related to the action
4. Check all/Uncheck all buttons with labels corresponding to the action

Note: Columns that have the associated action disabled do not appear in the list.

3.5. Navigation

3.6. API

Inputs

1. IgxColumnActionsComponent

   Name	Description	Type	Default value
   columns	A list of grid columns to provide an action for	Array<IgxColumnComponent>	[]
   title	The title of the column actions component	string	''
   filterColumnsPrompt	The prompt that is displayed in the filter input	string	''
   hideFilter	Shows/hides the filter input	bool	false
   filterCriteria	The criteria to filter the column list by	string	''
   columnDisplayOrder	The display order of the columns in the list	ColumnDisplayOrder*	DisplayOrder
   columnsAreaMaxHeight	The max height of the columns area	string	'100%'
   uncheckAllText	The text of the button that unchecks all columns	string	'Uncheck All'
   checkAllText	The text of the button that checks all columns	string	'Check All'

Note: Where ColumnDisplayOrder is an enumeration with two possible values - Alphabetical and DisplayOrder.

Properties

1. IgxGridComponent

Methods

1. IgxGridComponent

   Name	Description	Return type	Parameters
   uncheckAllColumns	Unchecks all columns and performs the associated action	undefined
   checkAllColumns	Checks all columns and performs the associated action	undefined

Outputs

Name	Description	Cancelable	Parameters
onColumnPinning	Emitted when pinning is requested, before the execution completes. Users may edit the arguments.insertAtIndex property to change the position of the column in the pinned area.		column: IgxGridColumnComponent, insertAtIndex: number

4. ARIA Support

Specify only if applicable

5. Assumptions and Limitations

Assumptions	Limitation Notes
Column Pinning is only available in grids with horizontal scrollbars	Pinning only makes sense when the grid can be scrolled horizontally

6. References

Specify all referenced external sources, incl. competitors’ links. Remove before publishing outside Infragistics

Test Plan Overview