Sorry about the formatting. I have also included screen shots of the child table working in the same razor page.
Hopefully the code below is better to read.
@page "/priorities"
<PageTitle>Priorities</PageTitle>
<div class="row" style="margin-bottom: 1rem">
<div class="col-12 col-md-6">
<RadzenText Text="Priorities" TextStyle="TextStyle.H3" TagName="TagName.H1" style="margin: 0" />
</div>
<div class="col-12 col-md-6 justify-content-start justify-content-md-end" style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem">
<RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add" Click="@AddButtonClick" Variant="Variant.Flat" />
</div>
</div>
<div class="row" style="margin-bottom: 1rem">
<div class="col-12">
<RadzenTextBox Placeholder="Search ..." style="display: block; width: 100%" @oninput="@Search" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<RadzenDataGrid @ref="grid0" ColumnWidth="200px" AllowFiltering="true" FilterMode="FilterMode.Advanced" AllowPaging="true" AllowSorting="true"
Data="@priorities" Count=count LoadData=@Grid0LoadData TItem="TestRadzenApp.Server.Models.DCProjectsApp.Priority" RowSelect="@EditRow" RowExpand=@GetChildData>
<Columns>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Priority" Property="PriorityId" Title="PriorityId">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Priority" Property="Name" Title="Name">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Priority" Filterable="false" Sortable="false" Width="70px" TextAlign="TextAlign.Center">
<Template Context="priority">
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Size="ButtonSize.Medium"
Shade="Shade.Lighter" Variant="Variant.Flat"
Click=@(args => GridDeleteButtonClick(args, priority)) @onclick:stopPropagation="true" />
</Template>
</RadzenDataGridColumn>
</Columns>
<Template Context="priority">
<RadzenHeading Visible="@(priority != null)" Size="H1" Text="Projects" />
<RadzenButton Visible="@(priority != null)" Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add" Click=@(args => ProjectAddButtonClick(args,priority)) />
<RadzenDataGrid ColumnWidth="200px" Visible="@(priority != null)" @ref=ProjectDataGrid AllowFiltering="true" FilterMode="Radzen.FilterMode.Advanced" AllowPaging="true" AllowSorting="true"
Data="@priority?.Projects" TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" RowSelect="@(args => ProjectRowSelect(args, priority))">
<Columns>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="ProjectId" Title="ProjectId">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="ProjectName" Title="ProjectName">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="ProjectDesc" Title="ProjectDesc">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="DueDate" Title="DueDate">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="RequesedBy" Title="RequesedBy">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="DateCreated" Title="DateCreated">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="DateUpdate" Title="DateUpdate">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="IsDeleted" Title="IsDeleted">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="Building.BuildingName" Title="Building">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="Person.FirstName" Title="Person">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="Priority.Name" Title="Priority">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="ProjectType.Name" Title="ProjectType">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Property="Status.Name" Title="Status">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="TestRadzenApp.Server.Models.DCProjectsApp.Project" Filterable="false" Sortable="false" Width="70px" TextAlign="TextAlign.Center">
<Template Context="projectChild">
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="close" Size="ButtonSize.Small"
Click=@(args => ProjectDeleteButtonClick(args, projectChild)) @onclick:stopPropagation="true" />
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
</Template> </RadzenDataGrid>
</div>
</div>
Priorities.razor.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.JSInterop;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Radzen;
using Radzen.Blazor;
namespace TestRadzenApp.Client.Pages
{
public partial class Priorities
{
[Inject]
protected IJSRuntime JSRuntime { get; set; }
[Inject]
protected NavigationManager NavigationManager { get; set; }
[Inject]
protected DialogService DialogService { get; set; }
[Inject]
protected TooltipService TooltipService { get; set; }
[Inject]
protected ContextMenuService ContextMenuService { get; set; }
[Inject]
protected NotificationService NotificationService { get; set; }
[Inject]
public DCProjectsAppService DCProjectsAppService { get; set; }
protected IEnumerable<TestRadzenApp.Server.Models.DCProjectsApp.Priority> priorities;
protected RadzenDataGrid<TestRadzenApp.Server.Models.DCProjectsApp.Priority> grid0;
protected int count;
protected string search = "";
protected async Task Search(ChangeEventArgs args)
{
search = $"{args.Value}";
await grid0.GoToPage(0);
await grid0.Reload();
}
protected async Task Grid0LoadData(LoadDataArgs args)
{
try
{
var result = await DCProjectsAppService.GetPriorities(filter: $@"(contains(Name,""{search}"")) and {(string.IsNullOrEmpty(args.Filter)? "true" : args.Filter)}", orderby: $"{args.OrderBy}", top: args.Top, skip: args.Skip, count:args.Top != null && args.Skip != null);
priorities = result.Value.AsODataEnumerable();
count = result.Count;
}
catch (System.Exception ex)
{
NotificationService.Notify(new NotificationMessage(){ Severity = NotificationSeverity.Error, Summary = $"Error", Detail = $"Unable to load Priorities" });
}
}
protected async Task AddButtonClick(MouseEventArgs args)
{
await DialogService.OpenAsync<AddPriority>("Add Priority", null);
await grid0.Reload();
}
protected async Task EditRow(TestRadzenApp.Server.Models.DCProjectsApp.Priority args)
{
await DialogService.OpenAsync<EditPriority>("Edit Priority", new Dictionary<string, object> { {"PriorityId", args.PriorityId} });
await grid0.Reload();
}
protected async Task GridDeleteButtonClick(MouseEventArgs args, TestRadzenApp.Server.Models.DCProjectsApp.Priority priority)
{
try
{
if (await DialogService.Confirm("Are you sure you want to delete this record?") == true)
{
var deleteResult = await DCProjectsAppService.DeletePriority(priorityId:priority.PriorityId);
if (deleteResult != null)
{
await grid0.Reload();
}
}
}
catch (Exception ex)
{
NotificationService.Notify(new NotificationMessage
{
Severity = NotificationSeverity.Error,
Summary = $"Error",
Detail = $"Unable to delete Priority"
});
}
}
protected TestRadzenApp.Server.Models.DCProjectsApp.Priority priority;
protected async Task GetChildData(TestRadzenApp.Server.Models.DCProjectsApp.Priority args)
{
priority = args;
var ProjectResult = await DCProjectsAppService.GetProjects(filter:$"PriorityId eq {args.PriorityId}", expand: "Building,Person,Priority,ProjectType,Status");
if (ProjectResult != null)
{
args.Projects = ProjectResult.Value.ToList();
}
}
protected RadzenDataGrid<TestRadzenApp.Server.Models.DCProjectsApp.Project> ProjectDataGrid;
protected async Task ProjectAddButtonClick(MouseEventArgs args, TestRadzenApp.Server.Models.DCProjectsApp.Priority data)
{
var dialogResult = await DialogService.OpenAsync<AddProject>("Add Project", new Dictionary<string, object> { {"PriorityId" , data.PriorityId} });
await GetChildData(data);
await ProjectDataGrid.Reload();
}
protected async Task ProjectRowSelect(TestRadzenApp.Server.Models.DCProjectsApp.Project args, TestRadzenApp.Server.Models.DCProjectsApp.Priority data)
{
var dialogResult = await DialogService.OpenAsync<EditProject>("Edit Project", new Dictionary<string, object> { {"ProjectId", args.ProjectId} });
await GetChildData(data);
await ProjectDataGrid.Reload();
}
protected async Task ProjectDeleteButtonClick(MouseEventArgs args, TestRadzenApp.Server.Models.DCProjectsApp.Project project)
{
try
{
if (await DialogService.Confirm("Are you sure you want to delete this record?") == true)
{
var deleteResult = await DCProjectsAppService.DeleteProject(projectId:project.ProjectId);
if (deleteResult != null)
{
await ProjectDataGrid.Reload();
}
}
}
catch (System.Exception ex)
{
NotificationService.Notify(new NotificationMessage
{
Severity = NotificationSeverity.Error,
Summary = $"Error",
Detail = $"Unable to delete Project"
});
}
}
}
}
riority.cs
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Text.Json;
using System.Text.Json.Serialization;
namespace TestRadzenApp.Server.Models.DCProjectsApp
{
[Table("Priority", Schema = "dbo")]
public partial class Priority
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int PriorityId { get; set; }
public string Name { get; set; }
public ICollection<Project> Projects { get; set; }
}
}