DataGrid for DevExtreme - How to implement a custom column chooser

This example demonstrates how to implement a custom column chooser for a DataGrid or TreeList.

The DataGrid and TreeList include a built-in column chooser that allows users to alter column visibility at runtime. If you need a more flexible solution, you can use the Popup and List components to implement a custom column chooser.

In this example, the custom column chooser includes a Select All checkbox that can be used to select/deselect all columns at once. All alterations in column visibility are applied when you click the button.

Files to Review

• jQuery
  • index.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • App.vue
• React
  • App.js
• ASP.NET
  • Index.cshtml

Documentation

• Getting Started with DataGrid
• Getting Started with Popup
• Getting Started with List

More Examples

• DataGrid - How to implement a custom editing form using Form and Popup
• DataGrid - Column Customization