How to Sort, Filter, Copy and Paste Data in a Blazor Datagrid Control

Flexgrid is a powerful Blazor datagrid control that provides many features like displaying data, sorting, paging, editing, and many more. In the continuation of these features, the ComponentOne Blazor Flexgrid team added built-in menus that enable end-users to: 

1. Filter a column
2. Sort a column
3. Expand a column
4. Group by a column
5. Copy, cut, or paste a row 

Ready to Try it Out? Download ComponentOne Today!

They are exceptionally rich in features and help end-users perform a variety of tasks quickly through mouse interaction. In this article, we will learn about these features and their implementation.  

Filtering, Sorting, and Grouping by Column Menu 

In FlexGrid’s column headers, three ellipses (...) appear next to the header text and allow users to access the dropdown menu. In addition to filtering, this menu will enable users to sort the column by ascending or descending values. It also allows expanding the column width based on the available width in FlexGrid.    

The visibility of these options can be set through the FlexGrid’s ColumnOptionsMenuVisibility property. This property has these values: 

• Collapsed - the menu will not be visible
• Visible - the menu will be visible
• MouseOver - the menu will appear when the mouse is over the column header
• Auto - detects if the user has a mouse or touch to use the best approach (visible or mouse over)

You can set the visibility by setting the ColumnOptionsMenuVisibility property as such:

<FlexGrid @ref="grid" ItemsSource="@collection" ColumnOptionsMenuVisibility="GridColumnOptionsMenuVisibility.Auto"  AutoGenerateColumns="false" > 
        <FlexGridColumns>
            <GridColumn Binding="Customer" Header="Customer" ></GridColumn> 
            <GridColumn Binding="Category" Header="Category" ></GridColumn> 
            <GridColumn Binding="BuyingGroup" Header="Buying Group"></GridColumn> 
            <GridColumn Binding="Sales" Header="Sales"></GridColumn> 
            <GridColumn Binding="ValidFrom" Header="From"></GridColumn> 
        </FlexGridColumns> 
</FlexGrid>

Pro Tip: Column Menu is useful for sorting and filtering operations 

Filter Options 

Filtering options are based on the data type for the column. FlexGrid supports special filtering for strings, numbers, and dates. Those options are available based on the Column DataType. 

Filter by String

The condition filter contains the options for matching the data and the textbox for searching the text. It also includes the [X] button to clear the content. 

Filter by Number

There is a matching option based on the Number DataType and the C1NumericBox for entering the search value. 

Filter by Date

This column has the same options as the Number filter. Instead of the C1NumericBox, it has the C1DatePicker.

Grouping by a Column

Along with these options, Group by This Column is another useful option in the Blazor FlexGrid column header menu. This option allows a group of the FlexGrid based on a specified column if the DataSource supports grouping. 

This option can be enabled by setting the AllowGrouping property to true for the specified column and FlexGrid. Please refer to the following code snippet for reference:

<FlexGrid @ref="grid" ItemsSource="@collection" ShowSelectionMenu="true" AutoGenerateColumns="false"  IsVirtualizationEnabled=false
            AllowGrouping="true" AllowDragging="GridAllowDragging.Both" AllowFiltering="true" AllowMerging="GridAllowMerging.All" AllowResizing="GridAllowResizing.Both" AllowSorting=true 
            SelectionMode="GridSelectionMode.Row" Style="C1GridStyle.GridStyle"  RowStyle="C1GridStyle.RowStyle" AlternatingRowStyle="C1GridStyle.AlternatingRowStyle" ColumnHeaderStyle = "C1GridStyle.ColumnHeaderStyle">
        <FlexGridColumns>
            <GridColumn Binding="Customer" Header="Customer"  ></GridColumn>
            <GridColumn Binding="Category" Header="Category" AllowGrouping="true" ></GridColumn>
            <GridColumn Binding="BuyingGroup" Header="Buying Group" AllowGrouping="true"></GridColumn>
            <GridColumn Binding="Sales" Header="Sales"  Format="n2"></GridColumn>
            <GridColumn Binding="ValidFrom" Header="From"></GridColumn>
        </FlexGridColumns>
    </FlexGrid>

Copy, Cut and Paste by Context Menu 

For row actions, FlexGrid supports a context menu that appears on right-click on top of a data row. 

Since the FlexGrid is in edit mode, the context menu contains options to Cut, Paste and Delete options. Plus, users can Copy a row even if it can’t be edited.

The context menu can be enabled or disabled by setting true or false for Flexgrid’s ShowSelectionMenu property. Allows displaying default or custom context menus when ShowSelectionMenu is set to true.   

<FlexGrid @ref="grid" ItemsSource="@collection" ShowSelectionMenu="true" AutoGenerateColumns="false" SelectionMode="GridSelectionMode.Row" > 
        <FlexGridColumns> 
            <GridColumn Binding="Customer" Header="Customer" ></GridColumn> 
            <GridColumn Binding="Category" Header="Category" ></GridColumn> 
            <GridColumn Binding="BuyingGroup" Header="Buying Group"></GridColumn> 
            <GridColumn Binding="Sales" Header="Sales"></GridColumn> 
            <GridColumn Binding="ValidFrom" Header="From"></GridColumn> 
        </FlexGridColumns> 
    </FlexGrid> 

Customizing the Context Menu

The default context menu has default and required options. However, while working with FlexGrid, the default menu might not be sufficient, and we need to customize the menu.  

For customizing the context menu, we need to handle the CreatingSelectionMenu and customize the items for GridSelectionMenuEventArgs.Menu.  

protected override Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (this.grid != null) 
        { 
            // for customizing the Selection Menu 
            this.grid.CreatingSelectionMenu += this.CreatingMenu; 
        } 
        return base.OnAfterRenderAsync(firstRender); 
    } 
  
    public void CreatingMenu(object? sender, GridSelectionMenuEventArgs args) 
    { 
        if(args.CellType == GridCellType.Cell) 
        { 
            //remove existing Menu 
            args.Menu.Items.RemoveAt(args.Menu.Items.Count - 1); 
             //add new custom Menu Item 
            args.Menu.Items.Add(CreateContextMenuItem("Delete Row",C1IconTemplate.Delete,async delegate 
            { 
               await DeleteRow(grid); 
            })); 
        } 
    } 
  
    private C1MenuItem CreateContextMenuItem(string Header , RenderFragment<C1Style>? icon ,Action? action) 
    { 
        C1MenuItem menuItem = new C1MenuItem(); 
        menuItem.Header = Header; 
        menuItem.IconTemplate = icon; 
        menuItem.Click += delegate 
       { 
            action(); 
        }; 
        return menuItem; 
   } 
  
  
    // Delete the selected Row from the FlexGrid 
    private async Task DeleteRow(FlexGrid grid) 
    { 
        var index = grid.Selection.Row; 
        await grid.DataCollection.RemoveAsync(index); 
     } 

Using the above code snippet, we removed the default Delete option and added a custom Delete Row option. While adding the custom menu, we need to enable the required properties and settings to perform that operation.  

This article was an introduction to basic usage & customizations of the column header menu and context menu. 

Feel free to explore these features even further & happy coding!

Ready to Try it Out? Download ComponentOne Today!