/
DataGridColumnReoderPage.razor
58 lines (48 loc) · 3.07 KB
/
DataGridColumnReoderPage.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
@page "/datagrid-column-reorder"
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@inject NorthwindContext dbContext
<h1>DataGrid</h1>
<p>Enable column reorder by setting the AllowColumnReorder property to true.</p
<RadzenExample Name="DataGrid" Heading="false" Documentation="false">
<RadzenButton Text="Change page state" Click="@((args) => { StateHasChanged(); })" Style="margin-bottom:20px" />
<RadzenDataGrid AllowColumnReorder="true" ColumnReordered="@OnColumnReordered"
AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">
<Columns>
<RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="50px" TextAlign="TextAlign.Center" Reorderable="false" Resizable="false" />
<RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Width="200px" >
<Template Context="data">
<RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
<RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
<RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" />
<RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
<RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
<RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
<RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" />
<RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
<RadzenDataGridColumn TItem="Employee" Property="Region" Title="Region" />
<RadzenDataGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
<RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
<RadzenDataGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
<RadzenDataGridColumn TItem="Employee" Property="Extension" Title="Extension" />
<RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
</Columns>
</RadzenDataGrid>
</RadzenExample>
<EventConsole @ref=@console />
@code {
EventConsole console;
IEnumerable<Employee> employees;
protected override void OnInitialized()
{
employees = dbContext.Employees;
}
void OnColumnReordered(DataGridColumnReorderedEventArgs<Employee> args)
{
console.Log($"Reordered {args.Column.Title}. Old index: {args.OldIndex}, New index: {args.NewIndex}");
}
}