Infragistics(R) IgniteUI
Hiding Column Chooser
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

This topic demonstrates how to use the igGrid control’s Hiding Column Chooser.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic

Purpose

Touch Support for IgniteUI Controls

This topic introduces the updates to IgniteUI™ controls for touch-support interactions.

igGrid™ Feature Chooser

This topic explains the igGrid™ Feature Chooser menu and its sections.

igGrid Hiding Overview

This sample shows you how to enable and use the igGrid Hiding feature.


In this topic


Introduction

Introduction to the igGridHiding Column Chooser

This topic demonstrates how to work with the igGrid Hiding dialog also known as Column Chooser. You can activate the Columns Chooser window in two different ways. The first way is to select Column Chooser list item from the igGrid Feature Chooser advanced section and second on is to press Column Chooser button from the hidden column context menu.


Dialog Window states

Dialog window states

The following table summarizes the states of the Hiding Column Chooser Window. The window has two states as defined by the value of the option columnChooserHideOnClick (default value is false). If set to true, then the columns will hide immediately on click of the column name in the Column Chooser.

Additional details are available after the summary table.

State

columnChooserHideOnClick value

Description

Hide multiple columns at once

false

Multiple columns are selected from the column chooser window and columns are hidden when the changes are applied in the window.

Hide column on click

true

Columns are immediately hidden by selecting a column from the column chooser window.


Hide multiple columns at once

By default the property columnChooserHideOnClick is set to false. This means that you must select which columns to show or hide and then apply the changes to the grid.

Use the following buttons:

  1. Show - to show the column( the whole row is clickable)
  2. Hide – to hide the column( the whole row is clickable)
  3. Apply – to apply the columns you want to show/hide
  4. Cancel – to close the Column Chooser and don’t apply any changes
  5. Reset – to return the default state of all the columns, like they were when the modal dialog was opened.
  6. ESC (key) – close the modal dialog

Hide columns on click

When the property columnChooserHideOnClick is set to true then when you click on a Show or Hide button the selected action will take effect immediately to a column.

To close the window use the button at the top right or press the ESC key.

Use the following buttons:

  1. Show – to immediately show the column( the whole row is clickable)
  2. Hide – to immediately hide the column( the whole row is clickable)
  3. Close button – close the modal dialog
  4. ESC (key) – close the modal dialog

Property Reference

Introduction

This section explains igGrid control’s Hiding properties that affect Column Chooser.

Property reference summary

The following table shows the igGrid control’s Hiding properties that are responsible for the configuration of the Column Chooser.

Property

Description

Specifies whether the grid will show or hide a column when the column name is clicked in the column chooser.

The default column chooser width in pixels.

The default column chooser height in pixels

Specifies time in milliseconds for the animation duration to show or hide Column Chooser

   

The caption of the column chooser dialog.

The text used in the drop down tools menu (Feature Chooser) to launch the column chooser dialog.

The text displayed in the tooltip of the hidden column indicator.

The text used in the drop down tools menu (Feature Chooser) to hide a column.

The text used in the column chooser to show a column.

The text used in the column chooser to hide a column.

Text label for reset button.

Specifies text of button which applies changes in modal dialog.

Specifies text of button which cancels changes in modal dialog.



Method Reference

Introduction

This section explains igGrid control’s Hiding methods that affect Column Chooser.

Property reference summary

The following table shows the igGrid control’s Hiding methods exposed by the Column Chooser API.

Method

Description

Shows the Column Chooser dialog. If it is visible the method does nothing.

Hides the Column Chooser dialog. If it is not visible the method does nothing.

Reset hidden/shown column to initial state of dialog (when it is opened)

Remove Reset button in column chooser modal dialog



Event Reference

Introduction

This section explains igGrid control’s Hiding events raised by the Modal Windows.

Event reference summary

The following table shows the igGrid Hiding events that are fired during user interaction with the Column Chooser.

Event

Description

Event fired before the column chooser is opened.

Event fired after the column chooser opens.

Event fired every time the column chooser changes its position.

Event fired before the column chooser is closed.

Event fired after the column chooser is closed.

Event fired before the contents of the column chooser are rendered.

Event fired after the contents of the column chooser are rendered.

Event fired when Reset button in column chooser is clicked

Event fired when Reset button in column chooser is clicked



Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

Touch Support for IgniteUI Controls

This topic introduces the updates to IgniteUI™ controls for touch-support interactions.

This topic explains the igGrid Feature Chooser menu and its sections.

igGrid Hiding Overview

Overview of the igGrid control’s Hiding feature.


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

Sample that demonstrates which events are raised for the Column Choosers when sorting and hiding occur during user interaction.