Peace
/
BlazorRadzenPracs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

datagrid inline-editing

Browse Source
main
Peace 10 months ago
parent dbdb7fe193
commit e3e13a08cf
2 changed files with 191 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
  2. 185
      ComponentPractice/ComponentPractice/Components/Pages/DataGridEdit.razor

6
ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
Unescape View File

@ -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>

185
ComponentPractice/ComponentPractice/Components/Pages/DataGridEdit.razor
Unescape View File

@ -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;
}
}
Write Preview
Loading…
Cancel
Save