Column Resize

 
Contact Name
Contact Title
Company Name
City
Country
Phone
Charlotte Cooper Purchasing Manager Exotic Liquids London UK (171) 555-2222
Shelley Burke Order Administrator New Orleans Cajun Delights New Orleans USA (100) 555-4822
Regina Murphy Sales Representative Grandma Kelly's Homestead Ann Arbor USA (313) 555-5735
Yoshi Nagase Marketing Manager Tokyo Traders Tokyo Japan (03) 3555-5011
Antonio del Valle Saavedra Export Administrator Cooperativa de Quesos 'Las Cabras' Oviedo Spain (98) 598 76 54
Mayumi Ohno Marketing Representative Mayumi's Osaka Japan (06) 431-7877
Ian Devling Marketing Manager Pavlova, Ltd. Melbourne Australia (03) 444-2343
Peter Wilson Sales Representative Specialty Biscuits, Ltd. Manchester UK (161) 555-4448
Lars Peterson Sales Agent PB Knäckebröd AB Göteborg Sweden 031-987 65 43
Carlos Diaz Marketing Manager Refrescos Americanas LTDA Sao Paulo Brazil (11) 555 4640

The DevExpress Blazor Grid allows users to resize columns as needed. When users position the mouse pointer over the right border of a column, the component displays a double-sided arrow. This arrow allows users to drag the column border and change column width. To specify whether and how users can resize Grid columns, set the ColumnResizeMode property to one of the following values:

Use the Column Resize Mode combobox to switch between different modes.

Column Chooser

 
Contact Name Contact Title Company Name City Country
Charlotte Cooper Purchasing Manager Exotic Liquids London UK
Shelley Burke Order Administrator New Orleans Cajun Delights New Orleans USA
Regina Murphy Sales Representative Grandma Kelly's Homestead Ann Arbor USA
Yoshi Nagase Marketing Manager Tokyo Traders Tokyo Japan
Antonio del Valle Saavedra Export Administrator Cooperativa de Quesos 'Las Cabras' Oviedo Spain
Mayumi Ohno Marketing Representative Mayumi's Osaka Japan
Ian Devling Marketing Manager Pavlova, Ltd. Melbourne Australia
Peter Wilson Sales Representative Specialty Biscuits, Ltd. Manchester UK
Lars Peterson Sales Agent PB Knäckebröd AB Göteborg Sweden
Carlos Diaz Marketing Manager Refrescos Americanas LTDA Sao Paulo Brazil

The DevExpress Blazor Grid allows users to customize its column list via its integrated Columns Chooser. The Column Chooser lists data, command, and selection columns. User can:

  • Display or hide columns: To display or hide a column, users must enable/disable corresponding checkboxes within the Column Chooser. This action modifies a column's Visible property value.
  • Reorder columns: To change column position, users can drag/drop and reposition the column within the Column Chooser. This action modifies a column's VisibleIndex property value.

To display the Column Chooser, use the ShowColumnChooser method. In this demo, a DxButton is used to invoke the Column Chooser.