datalist basic

ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor

@@ -38,6 +38,11 @@
                     <RadzenPanelMenuItem Text="CSV Export" Icon="view_headline" Path="datagridcsvexport" />
                 </div>
             </RadzenPanelMenuItem>
+            <RadzenPanelMenuItem Text="DataList" Icon="list_alt">
+                <div onclick="document.querySelector('.navbar-toggler').click()">
+                    <RadzenPanelMenuItem Text="Basic" Icon="format_list_bulleted" Path="datalist" />
+                </div>
+            </RadzenPanelMenuItem>
         </RadzenPanelMenu>
     </RadzenStack>
 </div>

ComponentPractice/ComponentPractice/Components/Pages/DataList.razor

@@ -0,0 +1,77 @@
+@page "/datalist"
+
+@inject InMemoryData data;
+
+@rendermode RenderMode.InteractiveServer
+
+<style>
+    .product-title {
+        min-height: 72px;
+        background-color: var(--rz-primary-lighter)
+    }
+    .region-badge {
+        font-size: 16px;
+        font-weight: bold;
+        line-height: 20px;
+        padding: 8px;
+    }
+</style>
+
+<RadzenCard class="rz-p-12">
+    <RadzenStack class="rz-p-2" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+        <RadzenCheckBox @bind-Value="@allowVirtualization" Name="allowVirtualization"/>
+        <RadzenLabel Text="Allow virtualization" Component="allowVirtualization"/>
+    </RadzenStack>
+
+    <RadzenDataList Data="@employees" TItem="@Employee"
+                    AllowPaging="@(!allowVirtualization)" PageSize="5" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
+                    AllowVirtualization="@allowVirtualization" WrapItems="@(!allowVirtualization)"
+                    Style="@(allowVirtualization ? "height:400px;overflow:auto;" : "")">
+        <Template Context="employee">
+            <RadzenCard Style="width:100%; padding:0;">
+                <RadzenRow Gap="0">
+                    <RadzenColumn class="rz-p-4 product-title" Size="12" SizeLG="3">
+                        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+                            <RadzenImage class="rz-gravatar" Path="@employee.Photo" />
+                            <RadzenText class="rz-color-primary" TextStyle="TextStyle.DisplayH6" TagName="TagName.H5">@($"{employee.FirstName} {employee.LastName}")</RadzenText>
+                        </RadzenStack>
+                    </RadzenColumn>
+                    <RadzenColumn class="rz-p-4" Size="12" SizeLG="7">
+                        <RadzenRow Gap="0">
+                            <RadzenColumn Size="12" SizeMD="6" SizeLG="2">
+                                <RadzenText class="rz-mb-0" TextStyle="TextStyle.DisplayH6" TagName="TagName.H5">Title</RadzenText>
+                                <RadzenText class="rz-mb-0" TextStyle="TextStyle.Body2">@(employee.Title)</RadzenText>
+                            </RadzenColumn>
+                            <RadzenColumn Size="12" SizeMD="6" SizeLG="2">
+                                <RadzenText class="rz-mb-0" TextStyle="TextStyle.DisplayH6" TagName="TagName.H5">Job</RadzenText>
+                                <RadzenText class="rz-mb-0" TextStyle="TextStyle.Body2">@(employee.Job)</RadzenText>
+                            </RadzenColumn>
+                            <RadzenColumn Size="12" SizeMD="6" SizeLG="5">
+                                <RadzenText class="rz-mb-0" TextStyle="TextStyle.DisplayH6" TagName="TagName.H5">Address</RadzenText>
+                                <RadzenText class="rz-mb-0" TextStyle="TextStyle.Body2">@(employee.Address)</RadzenText>
+                            </RadzenColumn>
+                            <RadzenColumn class="rz-text-align-start rz-text-align-lg-end" Size="12" SizeMD="6" SizeLG="3">
+                                <RadzenBadge class="region-badge" BadgeStyle="BadgeStyle.Secondary" Shade="Shade.Lighter">@(employee.Region)</RadzenBadge>
+                            </RadzenColumn>
+                        </RadzenRow>
+                    </RadzenColumn>
+                    <RadzenColumn class="rz-p-4" Size="12" SizeLG="2">
+                        <RadzenButton Text="Call" Style="width:100%"/>
+                    </RadzenColumn>
+                </RadzenRow>
+            </RadzenCard>
+        </Template>
+    </RadzenDataList>
+</RadzenCard>
+
+@code {
+    bool allowVirtualization;
+
+    IQueryable<Employee> employees;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var tmp = await data.GetEmployeeDataAsync(100);
+        employees = tmp.AsQueryable();
+    }
+}