datagrid load event

ComponentPractice/ComponentPractice/.config/dotnet-tools.json

@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "dotnet-ef": {
+      "version": "8.0.6",
+      "commands": [
+        "dotnet-ef"
+      ],
+      "rollForward": false
+    }
+  }
+}

ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor

@@ -55,6 +55,12 @@
                 <RadzenIcon Icon="assignment" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;DataGrid
             </NavLink>
         </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="datagridadv">
+                <RadzenIcon Icon="assignment" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;DataGrid Adv.
+            </NavLink>
+        </div>
     </nav>
 </div>
 

ComponentPractice/ComponentPractice/Components/Pages/DataGridAdv.razor

@@ -0,0 +1,89 @@
+@page "/datagridadv"
+@using System.Linq.Dynamic.Core
+
+@inject InMemoryData data;
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenCard class="rz-p-12" style="width: 900px;">
+    <RadzenText TextStyle="TextStyle.H5">DataGrid <strong>LoadData Event</strong></RadzenText>
+    <RadzenButton Text="Reset" Click="@Reset" Style="margin-bottom: 20px"/>
+    <RadzenDataGrid @ref="grid" Data="@employees" IsLoading="@isLoading" Count="@count" LoadData="@LoadData"
+                    AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.Advanced" AllowSorting="true" AllowPaging="true" PageSize="4" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
+                    ColumnWidth="325px" LogicalFilterOperator="LogicalFilterOperator.Or" SelectionMode="DataGridSelectionMode.Single">
+        <Columns>
+            <RadzenDataGridColumn Property="@nameof(Employee.ID)" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Photo)" Filterable="false" Title="Photo" Frozen="true" Sortable="false" Width="80px" TextAlign="TextAlign.Center">
+                <Template Context="employee">
+                    <RadzenImage Path="@employee.Photo" class="rz-gravatar" AlternateText="@($"{employee.FirstName} {employee.LastName}")" />
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="First Name" Frozen="true" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.LastName)" Title="Last Name" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Job)" Title="Job" Width="200px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" Width="120px"
+                                  Type="@typeof(IEnumerable<string>)" FilterValue="@selectedTitles" FilterOperator="FilterOperator.Contains">
+                <FilterTemplate>
+                    <RadzenDropDown Data="@titles" @bind-Value=selectedTitles Style="width: 100%" InputAttributes="@(new Dictionary<string, object>() { {"aria-label", "selected title"}})"
+                        Change="@OnSelectedTitlesChange" AllowClear="true" Multiple="true"/>
+                </FilterTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Property="@nameof(Employee.BirthDate)" Title="BirthDate" Width="160px" FormatString="{0:yyyy-MM-dd}" />
+            <RadzenDataGridColumn Property="@nameof(Employee.HireDate)" Title="HireDate" Width="160px" FormatString="{0:d}" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Address)" Title="Address" Width="200px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.City)" Title="City" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Region)" Title="Region" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.PostalCode)" Title="PostalCode" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.County)" Title="County" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Phone)" Title="Phone" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Extension)" Title="Extension" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Notes)" Title="Notes" Width="300px" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenCard>
+
+@code {
+    RadzenDataGrid<Employee> grid;
+    IEnumerable<Employee> employees;
+    int count;
+    bool isLoading = false;
+
+    List<string> titles = new List<string> { "Junior", "Mid", "Senior", "Lead", "Chief" };
+    IEnumerable<string> selectedTitles;
+
+    async Task OnSelectedTitlesChange(object value)
+    {
+        if (selectedTitles != null && !selectedTitles.Any())
+            selectedTitles = null;
+
+        await grid.FirstPage();
+    }
+
+    async Task Reset()
+    {
+        grid.Reset(true);
+        await grid.FirstPage(true);
+    }
+
+    async Task LoadData(LoadDataArgs args)
+    {
+        isLoading = true;
+
+        await Task.Yield();
+
+        employees = await data.GetEmployeeDataAsync(100);
+        var query = employees.AsQueryable();
+
+        if (!string.IsNullOrEmpty(args.Filter))
+            query = query.Where(args.Filter);
+
+        if (!string.IsNullOrEmpty(args.OrderBy))
+            query = query.OrderBy(args.OrderBy);
+
+        count = query.Count();
+
+        employees = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();
+
+        isLoading = false;
+    }
+}

ComponentPractice/ComponentPractice/Program.cs

@@ -36,6 +36,8 @@ namespace ComponentPractice
             app.MapRazorComponents<App>()
                 .AddInteractiveServerRenderMode();
 
+            //app.Urls.Add("http://*:5000");
+
             app.Run();
         }
     }