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>

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

3.5. Navigation

3.6. API

Inputs

1. IgxColumnActionsComponent

   Name	Description	Type
   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

   |

Properties

1. IgxGridComponent

Methods

1. IgxGridComponent

   Name	Description	Return type	Parameters
   pinColumn	Pin the specified column	bool - whether the pin is successful or not	columnName: string

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