[EN] Blazor Datagrid 컨트롤에서 데이터를 정렬, 필터링, 복사 및 붙여넣는 방법

Blazor [EN] Blazor Datagrid 컨트롤에서 데이터를 정렬, 필터링, 복사 및 붙여넣는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2023-02-08 15:21 조회 309회 댓글 0건

본문

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.