datalist pager

ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor

@@ -41,6 +41,7 @@
             <RadzenPanelMenuItem Text="DataList" Icon="list_alt">
                 <div onclick="document.querySelector('.navbar-toggler').click()">
                     <RadzenPanelMenuItem Text="Basic" Icon="format_list_bulleted" Path="datalist" />
+                    <RadzenPanelMenuItem Text="Pager" Icon="format_list_bulleted" Path="datalistpager" />
                 </div>
             </RadzenPanelMenuItem>
         </RadzenPanelMenu>

ComponentPractice/ComponentPractice/Components/Pages/DataListPager.razor

@@ -0,0 +1,53 @@
+@page "/datalistpager";
+
+@inject InMemoryData data;
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenCard class="rz-p-12">
+    <RadzenStack class="rz-p-2 rz-border-radius-1" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Style="border: var(--rz-grid-cell-border);">
+        <RadzenText TextStyle="TextStyle.Body1">Pager density</RadzenText>
+        <RadzenSelectBar @bind-Value="@density" TextProperty="Text" ValueProperty="Value"
+                         Size="ButtonSize.Small"
+                         Data="@(Enum.GetValues(typeof(Density)).Cast<Density>().Select(t => new { Text = $"{t}", Value = t }))" />
+    </RadzenStack>
+
+    <RadzenDataList Data="@employees" TItem="@Employee"
+                    Density="@density"
+                    WrapItems="true"
+                    AllowPaging="true" PageSize="@PAGE_SIZE" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
+        <Template Context="employee">
+            <RadzenCard class="rz-p-5" Style="width:300px">
+                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
+                    <RadzenImage Path="@employee.Photo" Style="width:80px; height:80px; border-radius: 50%" AlternateText="@($"{employee.FirstName} {employee.LastName}")"/>
+                    <RadzenStack Gap="0">
+                        <RadzenText class="rz-display-flex rz-mt-2 rz-my-0" TextStyle="TextStyle.Overline">Employee</RadzenText>
+                        <RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.FirstName} {employee.LastName}")</b></RadzenText>
+                        <RadzenText class="rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Title</RadzenText>
+                        <RadzenText TextStyle="TextStyle.Body1"><b>@employee.Title</b></RadzenText>
+                    </RadzenStack>
+                </RadzenStack>
+                <hr style="border:none; background-color: rgba(0,0,0,0.2); height:1px; margin: 1rem 0;"/>
+                <RadzenRow>
+                    <RadzenColumn class="rz-text-truncate" Size="8">@employee.City</RadzenColumn>
+                    <RadzenColumn class="rz-text-align-end" Size="4">
+                        <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text="@employee.Job" />
+                    </RadzenColumn>
+                </RadzenRow>
+            </RadzenCard>
+        </Template>
+    </RadzenDataList>
+</RadzenCard>
+
+@code {
+    readonly int PAGE_SIZE = 6;
+
+    Density density;
+    IQueryable<Employee> employees;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var tmp = await data.GetEmployeeDataAsync(100);
+        employees = tmp.AsQueryable();
+    }
+}