The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
First Name
|
Last Name
|
Title
|
Hire Date
|
|---|---|---|---|
| Nancy | Davolio | Sales Representative | 5/1/2005 |
| Andrew | Fuller | Vice President, Sales | 8/14/1992 |
| Janet | Leverling | Sales Representative | 4/1/2002 |
| Margaret | Peacock | Sales Representative | 5/3/1993 |
| Steven | Buchanan | Sales Manager | 10/17/1993 |
| Michael | Suyama | Sales Representative | 10/17/1999 |
| Robert | King | Sales Representative | 1/2/1994 |
| Laura | Callahan | Inside Sales Coordinator | 3/5/2004 |
| Anne | Dodsworth | Sales Representative | 11/15/2004 |
The Column Chooser is a separate window that allows users to show, hide, and reorder Data Grid columns at runtime. The Column Chooser window displays a list of all data column headers (both visible and hidden). Use the Column Chooser window to:
- Change column visibility. To show or hide a column, use the checkbox next to the column header.
- Reorder columns. To change column position within the grid, use the drag icon next to the column header to drag and drop it to a new position.
To display the Column Chooser in the Data Grid's toolbar, follow the steps below:
- Add HeaderTemplate to the Data Grid's markup.
- Add the DxDataGridColumnChooserToolbarItem item to the Toolbar component in this template. Note that DxDataGridColumnChooserToolbarItem buttons are only used for toolbars defined in the Data Grid component.
In this demo, the Birth Date, Image File Name, and Notes columns are hidden. Use the Column Chooser to display these columns and reorder visible columns.
The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
Product Name
|
Category
|
Unit Price
|
Units In Stock
|
Quantity Per Unit
|
Discontinued
|
|---|---|---|---|---|---|
| Chai | Beverages | $18.00 | 39 | 10 boxes x 20 bags | |
| Chang | Beverages | $19.00 | 17 | 24 - 12 oz bottles | |
| Aniseed Syrup | Condiments | $10.00 | 13 | 12 - 550 ml bottles | |
| Chef Anton's Cajun Seasoning | Condiments | $22.00 | 53 | 48 - 6 oz jars | |
| Chef Anton's Gumbo Mix | Condiments | $21.00 | 0 | 36 boxes | |
| Grandma's Boysenberry Spread | Condiments | $25.00 | 120 | 12 - 8 oz jars | |
| Uncle Bob's Organic Dried Pears | Produce | $30.00 | 15 | 12 - 1 lb pkgs. | |
| Northwoods Cranberry Sauce | Condiments | $40.00 | 6 | 12 - 12 oz jars | |
| Mishi Kobe Niku | Meat/Poultry | $97.00 | 29 | 18 - 500 g pkgs. | |
| Ikura | Seafood | $31.00 | 31 | 12 - 200 ml jars |
The Column Chooser window displays headers of all data columns (visible and hidden). Note that command and selection columns are not shown in the Column Chooser. Use the ShowInColumnChooser property to change a default behavior and specify whether a column should be displayed in the Column Chooser window.
In this demo, the Column Chooser does not display the Product Name data column (its ShowInColumnChooser property is set to false).