datagrid

ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor

@@ -49,6 +49,12 @@
                 <RadzenIcon Icon="event_seat" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;SRBS
             </NavLink>
         </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="datagrid">
+                <RadzenIcon Icon="assignment" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;DataGrid
+            </NavLink>
+        </div>
     </nav>
 </div>
 

ComponentPractice/ComponentPractice/Components/Pages/DataGrid.razor

@@ -0,0 +1,47 @@
+@page "/datagrid"
+
+@inject InMemoryData data;
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenCard class="rz-p-12" style="width: 900px;">
+    <RadzenText TextStyle="TextStyle.H5">DataGrid <strong>IQuariable</strong></RadzenText>
+    <RadzenDataGrid Data="@employees" @bind-Value=@selectedEmployees
+                    AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.Advanced" AllowSorting="true" AllowPaging="true" PageSize="10" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
+                    ColumnWidth="300px" 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" />
+            <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 {
+    IEnumerable<Employee> employees;
+    IList<Employee> selectedEmployees;
+
+    protected override async Task OnInitializedAsync()
+    {
+        employees = await data.GetEmployeeDataAsync(100);
+
+        selectedEmployees = new List<Employee>() { employees.FirstOrDefault() };
+    }
+}

ComponentPractice/ComponentPractice/Components/_Imports.razor

@@ -9,4 +9,6 @@
 @using ComponentPractice
 @using ComponentPractice.Components
 @using Radzen
-@using Radzen.Blazor
+@using Radzen.Blazor
+@using Models
+@using Data

ComponentPractice/ComponentPractice/Data/InMemoryData.cs

@@ -0,0 +1,47 @@
+using ComponentPractice.Models;
+using System.Linq.Dynamic.Core;
+
+namespace ComponentPractice.Data
+{
+    public class InMemoryData
+    {
+        public async Task<List<Employee>> GetEmployeeDataAsync(int count)
+        {
+            var employees = new List<Employee>();
+            var random = new Random();
+            var firstNames = new[] { "John", "Jane", "Michael", "Emily", "Robert", "Linda", "William", "Jessica", "David", "Sarah" };
+            var lastNames = new[] { "Smith", "Johnson", "Brown", "Williams", "Jones", "Garcia", "Miller", "Davis", "Martinez", "Hernandez" };
+            var jobs = new[] { "Developer", "Designer", "Manager", "Analyst", "Consultant", "Administrator", "Engineer", "Specialist", "Technician", "Coordinator" };
+            var titles = new[] { "Junior", "Mid", "Senior", "Lead", "Chief" };
+            var cities = new[] { "New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "San Diego", "Dallas", "San Jose" };
+            var regions = new[] { "NY", "CA", "IL", "TX", "AZ", "PA", "TX", "CA", "TX", "CA" };
+            var counties = new[] { "USA", "USA", "USA", "USA", "USA", "USA", "USA", "USA", "USA", "USA" };
+
+            for (int i = 0; i < count; i++)
+            {
+                var employee = new Employee
+                {
+                    ID = i + 1,
+                    Photo = $"https://randomuser.me/api/portraits/med/{(i % 2 == 0 ? "men" : "women")}/{i}.jpg",
+                    FirstName = firstNames[random.Next(firstNames.Length)],
+                    LastName = lastNames[random.Next(lastNames.Length)],
+                    Job = jobs[random.Next(jobs.Length)],
+                    Title = titles[random.Next(titles.Length)],
+                    BirthDate = new DateTime(random.Next(1950, 2000), random.Next(1, 13), random.Next(1, 29)),
+                    HireDate = DateTime.Today.AddDays(-random.Next(1, 3650)),
+                    Address = $"{random.Next(1, 9999)} Main St",
+                    City = cities[random.Next(cities.Length)],
+                    Region = regions[random.Next(regions.Length)],
+                    PostalCode = $"{random.Next(10000, 99999)}",
+                    County = counties[random.Next(counties.Length)],
+                    Phone = $"{random.Next(100, 999)}-555-{random.Next(1000, 9999)}",
+                    Extension = $"{random.Next(100, 9999)}",
+                    Notes = "Generated demo data"
+                };
+                employees.Add(employee);
+            }
+
+            return await employees.ToDynamicListAsync<Employee>();
+        }
+    }
+}

ComponentPractice/ComponentPractice/Models/Employee.cs

@@ -0,0 +1,22 @@
+namespace ComponentPractice.Models
+{
+    public class Employee
+    {
+        public int ID { get; set; }
+        public string Photo { get; set; }
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        public string Job { get; set; }
+        public string Title { get; set; }
+        public DateTime BirthDate { get; set; }
+        public DateTime HireDate { get; set; }
+        public string Address { get; set; }
+        public string City { get; set; }
+        public string Region { get; set; }
+        public string PostalCode { get; set; }
+        public string County { get; set; }
+        public string Phone { get; set; }
+        public string Extension { get; set; }
+        public string Notes { get; set; }
+    }
+}

ComponentPractice/ComponentPractice/Program.cs

@@ -1,4 +1,5 @@
 using ComponentPractice.Components;
+using ComponentPractice.Data;
 using Radzen;
 
 namespace ComponentPractice
@@ -15,6 +16,8 @@ namespace ComponentPractice
 
             builder.Services.AddRadzenComponents();
 
+            builder.Services.AddScoped<InMemoryData>();
+
             var app = builder.Build();
 
             // Configure the HTTP request pipeline.