This sample demonstrates the default functionalities of the ColumnMenu. Click the icon of each column to open the column menu.
|
Column menu
|
|
The grid provides an option to display a column menu when the user clicks the icon on each column. This menu includes integrated features like sorting, grouping, filtering, column chooser, and auto-fitting. These features can be enabled by setting the showColumnMenu property to `true`. The default menu items include: SortAscending: Sort the current column in ascending order. SortDescending: Sort the current column in descending order. Group: Group the current column. Ungroup: Ungroup the current column. AutoFit: Auto-fit current column. AutoFitAll: Auto-fit all columns. ColumnChooser: Toggle column visibility. Filter: Display the filter option as specified in the filterSetting-> type. The default column menu items are enabled based on the corresponding feature settings. Additionally, the column menu allows users to include custom menu items with the default ones, or the replacement of the default items entirely with custom options. In this demo, the Column Menu feature is initially enabled by setting showColumnMenu to `true`, with sorting, grouping, filtering, column chooser, and auto-fit options. Users also have the option to toggle custom column menu items through using the dropdown list in the property panel. In the custom menu, sorting, grouping, and filtering are enabled, and custom options like column selection and clear selection have been added. Injecting Module Features of the Grid component are segregated into individual feature-wise modules. To use the column menu feature, inject the ColumnMenu module using the Grid.Inject(ColumnMenu) section. More information on the column menu can be found in this documentation section.