From e3e13a08cf8ac658a986abdd4770a9ea1fbfb981 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Fri, 28 Jun 2024 16:04:08 +0900
Subject: [PATCH] datagrid inline-editing

---
 .../Components/Layout/NavMenu.razor           |   6 +
 .../Components/Pages/DataGridEdit.razor       | 185 ++++++++++++++++++
 2 files changed, 191 insertions(+)
 create mode 100644 ComponentPractice/ComponentPractice/Components/Pages/DataGridEdit.razor

diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
index 5ba6723..369368a 100644
--- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
+++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
@@ -67,6 +67,12 @@
                 <RadzenIcon Icon="assignment" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;DataGrid REST
             </NavLink>
         </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="datagridedit">
+                <RadzenIcon Icon="build" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;DataGrid Edit
+            </NavLink>
+        </div>
     </nav>
 </div>
 
diff --git a/ComponentPractice/ComponentPractice/Components/Pages/DataGridEdit.razor b/ComponentPractice/ComponentPractice/Components/Pages/DataGridEdit.razor
new file mode 100644
index 0000000..355e28a
--- /dev/null
+++ b/ComponentPractice/ComponentPractice/Components/Pages/DataGridEdit.razor
@@ -0,0 +1,185 @@
+@page "/datagridedit"
+@using System.Linq.Dynamic.Core
+
+@inject InMemoryData data;
+
+@rendermode RenderMode.InteractiveServer
+
+<style>
+    .rz-grid-table {
+        width: unset;
+    }
+</style>
+
+<RadzenCard class="rz-p-12" style="width: 1000px;">
+    <RadzenText TextStyle="TextStyle.H5">DataGrid <strong>InLine Editing</strong></RadzenText>
+    <RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" Text="Add New Order" Click="@InsertRow" Disabled="@(employeesToInsert.Count > 0)" />
+    <RadzenDataGrid @ref="grid" TItem="@Employee" Data="@employees" IsLoading="@isLoading" EditMode="DataGridEditMode.Single"
+                    RowCreate="@OnCreateRow" RowUpdate="@OnUpdateRow" 
+                    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="160px" TextAlign="TextAlign.Center">
+                <EditTemplate Context="employee">
+                    <RadzenNumeric @bind-Value="employee.ID" class="mx-3" Style="width:80%"/>
+                </EditTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Property="@nameof(Employee.Photo)" Filterable="false" Title="Photo" Sortable="false" Width="80px" TextAlign="TextAlign.Center">
+                <Template Context="employee">
+                    <RadzenImage Path="@employee.Photo" class="rz-gravatar" AlternateText="@($"{employee.FirstName} {employee.LastName}")" />
+                </Template>
+                <EditTemplate Context="employee">
+                    <RadzenTextBox @bind-Value="employee.Photo" />
+                </EditTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="First Name" Width="160px">
+                <EditTemplate Context="employee">
+                    <RadzenTextBox @bind-Value="employee.FirstName" />
+                </EditTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Property="@nameof(Employee.LastName)" Title="Last Name" Width="160px">
+                <EditTemplate Context="employee">
+                    <RadzenTextBox @bind-Value="employee.LastName" />
+                </EditTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Property="@nameof(Employee.Job)" Title="Job" Width="200px">
+                <EditTemplate Context="employee">
+                    <RadzenTextBox @bind-Value="employee.Job" />
+                </EditTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Property="@nameof(Employee.BirthDate)" Title="BirthDate" Width="320px" FormatString="{0:yyyy-MM-dd}" >
+                <EditTemplate Context="employee">
+                    <RadzenDatePicker @bind-Value="employee.BirthDate" Style="width:100%" DateFormat="yyyy-MM-dd" />
+                </EditTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Property="@nameof(Employee.HireDate)" Title="HireDate" Width="160px" FormatString="{0:d}">
+                <EditTemplate Context="employee">
+                    <RadzenDatePicker @bind-Value="employee.HireDate" Style="width:100%" DateFormat="yyyy-MM-dd" />
+                </EditTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Property="@nameof(Employee.Notes)" Title="Notes" Width="300px" >
+                <EditTemplate Context="employee">
+                    <RadzenTextBox @bind-Value="employee.Notes" />
+                </EditTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn Context="employee" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Frozen="true" FrozenPosition="FrozenColumnPosition.Right">
+                <Template Context="employee">
+                    <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(args => EditRow(employee))" @onclick:stopPropagation="true"/>
+                    <RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Danger" Variant="Variant.Flat" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(args => DeleteRow(employee))" @onclick:stopPropagation="true" />
+                </Template>
+                <EditTemplate Context="employee">
+                    <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(args => SaveRow(employee))" aria-label="Save" />
+                    <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(args => CancelEdit(employee))" aria-label="Cancel" />
+                    <RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Danger" Variant="Variant.Flat" Size="ButtonSize.Medium" Shade="Shade.Lighter" class="my-1 ms-1" Click="@(args => DeleteRow(employee))" aria-label="Delete" />
+
+                </EditTemplate>
+            </RadzenDataGridColumn>
+        </Columns>
+    </RadzenDataGrid>
+</RadzenCard>
+
+@code {
+    RadzenDataGrid<Employee> grid;
+    List<Employee> employees;
+    bool isLoading = false;
+
+    List<string> titles = new List<string> { "Junior", "Mid", "Senior", "Lead", "Chief" };
+    IEnumerable<string> selectedTitles;
+
+    List<Employee> employeesToInsert = new List<Employee>();
+    List<Employee> employeesToUpdate = new List<Employee>();
+
+    protected async override Task OnInitializedAsync()
+    {
+        isLoading = true;
+
+        await Task.Yield();
+
+        employees = await data.GetEmployeeDataAsync(5);
+
+        isLoading = false;
+    }
+
+    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);
+
+        employeesToInsert.Clear();
+        employeesToUpdate.Clear();
+    }
+
+    async Task Reset(Employee employee)
+    {
+        employeesToInsert.Remove(employee);
+        employeesToUpdate.Remove(employee);
+    }
+
+    async Task InsertRow()
+    {
+        var employee = new Employee();
+        employeesToInsert.Add(employee);
+        await grid.InsertRow(employee);
+    }
+
+    async Task EditRow(Employee employee)
+    {
+        if (employeesToInsert.Count > 0)
+            Reset();
+
+        employeesToUpdate.Add(employee);
+        await grid.EditRow(employee);
+    }
+
+    async Task CancelEdit(Employee employee)
+    {
+        Reset(employee);
+
+        grid.CancelEditRow(employee);
+    }
+
+    async Task DeleteRow(Employee employee)
+    {
+        Reset(employee);
+
+        if (employees.Contains(employee))
+            employees.Remove(employee);
+        else
+            grid.CancelEditRow(employee);
+
+
+        await grid.Reload();
+    }
+
+    async Task SaveRow(Employee employee)
+    {
+        await grid.UpdateRow(employee);
+    }
+
+    void OnCreateRow(Employee employee)
+    {
+        employees.Add(employee);
+
+        employeesToInsert.Remove(employee);
+    }
+
+    void OnUpdateRow(Employee employee)
+    {
+        Reset(employee);
+
+        var found = employees.Where(e => e.ID == employee.ID).FirstOrDefault();
+        if (found is null)
+            return;
+
+        found = employee;
+    }
+}
+