カスタムのソートアイコン

In FlexGrid, you can customize the sort icon position using sortIconPosition property and also the template using sortAscendingIconTemplate and sortDescendingIconTemplate properties. The GIF below shows how the FlexGrid appears after sorting is applied to the grid.

Custom sort item

The following code example demonstrates how to customize sort icon in FlexGrid.

Razor	コードのコピー
@page "/FlexGrid/CustomSortIcon" @using C1.DataCollection @using C1.Blazor.Core @using C1.Blazor.Input @using C1.Blazor.Grid <FlexGrid ItemsSource="source" SortIconPosition="sortIconPosition" SortAscendingIconTemplate="sortAscendingIconTemplate" IsVirtualizationEnabled="false" Style="@("max-height:50vh")" /> @code { C1DataCollection<Customer> source; GridSortIconPosition[] sortIconPositions = { GridSortIconPosition.Inline, GridSortIconPosition.Left, GridSortIconPosition.Right }; GridSortIconPosition sortIconPosition = GridSortIconPosition.Inline; Dictionary<string, RenderFragment<C1Style>> sortAscendingIconTemplates = new Dictionary<string, RenderFragment<C1Style>>() { { nameof(C1IconTemplate.ChevronUp), C1IconTemplate.ChevronUp }, { nameof(C1IconTemplate.ArrowUp), C1IconTemplate.ArrowUp }, { nameof(C1IconTemplate.TriangleNorth), C1IconTemplate.TriangleNorth }, { nameof(C1IconTemplate.TriangleUp), C1IconTemplate.TriangleUp }, }; RenderFragment<C1Style> sortAscendingIconTemplate = C1IconTemplate.ChevronUp; protected override async Task OnInitializedAsync() { var customers = Customer.GetCustomerList(100); var dataCollection = new C1DataCollection<Customer>(customers); await dataCollection.SortAsync(new SortDescription(nameof(Customer.FirstName), SortDirection.Ascending), new SortDescription(nameof(Customer.LastName), SortDirection.Descending)); source = dataCollection; } }

Razor

コードのコピー

@page "/FlexGrid/CustomSortIcon"
@using C1.DataCollection
@using C1.Blazor.Core
@using C1.Blazor.Input
@using C1.Blazor.Grid
<FlexGrid ItemsSource="source" SortIconPosition="sortIconPosition" SortAscendingIconTemplate="sortAscendingIconTemplate" IsVirtualizationEnabled="false" Style="@("max-height:50vh")" />

@code {
     C1DataCollection<Customer> source;
     GridSortIconPosition[] sortIconPositions = { GridSortIconPosition.Inline, GridSortIconPosition.Left, GridSortIconPosition.Right };
     GridSortIconPosition sortIconPosition = GridSortIconPosition.Inline;
     Dictionary<string, RenderFragment<C1Style>> sortAscendingIconTemplates = new Dictionary<string, RenderFragment<C1Style>>()
     {
         { nameof(C1IconTemplate.ChevronUp), C1IconTemplate.ChevronUp },
         { nameof(C1IconTemplate.ArrowUp), C1IconTemplate.ArrowUp },
         { nameof(C1IconTemplate.TriangleNorth), C1IconTemplate.TriangleNorth },
         { nameof(C1IconTemplate.TriangleUp), C1IconTemplate.TriangleUp },
     };
     RenderFragment<C1Style> sortAscendingIconTemplate = C1IconTemplate.ChevronUp;
    protected override async Task OnInitializedAsync()
     {
         var customers = Customer.GetCustomerList(100);
         var dataCollection = new C1DataCollection<Customer>(customers);
         await dataCollection.SortAsync(new SortDescription(nameof(Customer.FirstName), SortDirection.Ascending), new SortDescription(nameof(Customer.LastName), SortDirection.Descending));
         source = dataCollection;
     }
 }