datagrid virtualization

ComponentPractice/ComponentPractice/Components/Pages/DataGridREST.razor

@@ -11,9 +11,9 @@
     <RadzenButton Text="Reset" Click="@Reset" Style="margin-bottom: 20px" />
 
     <RadzenDataGrid @ref="grid" Data="@customers" IsLoading="@isLoading" Count="@count" LoadData="@LoadData"
-        SelectionMode="DataGridSelectionMode.Single"
-        AllowPaging="true" PageSize="@PAGE_SIZE" PagerHorizontalAlign="HorizontalAlign.Center" ShowPagingSummary="true"
-        AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.CheckBoxList" AllowSorting="true">
+                    SelectionMode="DataGridSelectionMode.Single"
+                    AllowPaging="true" PageSize="@PAGE_SIZE" PagerHorizontalAlign="HorizontalAlign.Center" ShowPagingSummary="true"
+                    AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.CheckBoxList" AllowSorting="true">
         <Columns>
             <RadzenDataGridColumn Property="@nameof(Customer.CustomerID)" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
             <RadzenDataGridColumn Property="@nameof(Customer.CompanyName)" Filterable="true" Title="Company" Frozen="true" Width="240px" TextAlign="TextAlign.Center" />
@@ -29,6 +29,29 @@
     </RadzenDataGrid>
 </RadzenCard>
 
+<RadzenCard class="rz-p-12" Style="width: 900px">
+    <RadzenText TextStyle="TextStyle.H5">DataGrid <strong>Virtualization</strong></RadzenText>
+
+    <RadzenDataGrid Data="@vtzdCustomers" Style="height:500px"
+                    AllowVirtualization="true"
+                    SelectionMode="DataGridSelectionMode.Single"
+                    AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.CheckBoxList" AllowSorting="true">
+        <Columns>
+            <RadzenDataGridColumn Property="@nameof(Customer.CustomerID)" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Customer.CompanyName)" Filterable="true" Title="Company" Frozen="true" Width="240px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Customer.ContactTitle)" Filterable="true" Title="Contact" Width="320px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Customer.Address)" Filterable="true" Title="Address" Width="240px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Customer.City)" Filterable="true" Title="City" Width="160px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Customer.Region)" Filterable="true" Title="Region" Width="160px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Customer.PostalCode)" Filterable="true" Title="PostalCode" Width="160px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Customer.Country)" Filterable="true" Title="Country" Width="160px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Customer.Phone)" Filterable="true" Title="Phone" Width="160px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn Property="@nameof(Customer.Fax)" Filterable="true" Title="Fax" Width="160px" TextAlign="TextAlign.Center" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenCard>
+
+
 
 @code {
     readonly int PAGE_SIZE = 10;
@@ -68,4 +91,13 @@
 
         isLoading = false;
     }
+
+    // Virtualization
+    IEnumerable<Customer> vtzdCustomers;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var result = await service.GetCustomer();
+        vtzdCustomers = result.Value;
+    }
 }