Keyproperty in DataGrid

Hi,

I tried to do the same thing that your demo : DataGrid Master Detail Hierarchy
See the picture below.

I've created foreign Key between main table and action table.

I would like to know if the KeyProperty in the action table is needed to identify the row in the main table.

       <RadzenDataGrid @ref="gridaction"  AllowFiltering="true" AllowPaging="true" PageSize="5" AllowSorting="true" EditMode="DataGridEditMode.Single"
                Data="@dev.ActionItems" TItem="ActionItem" CellRender="@CellRender" RowRender="@RowRender" ExpandMode="DataGridExpandMode.Single"
                SelectionMode="DataGridSelectionMode.Single" KeyProperty="dev.SuiviBEId">

If not, how can I associate the two tables with the key?

The class that uses is :

public class SuiviBE
    {
        [Key]
        public int SuiviBEId { get; set; }
        ...
        public List<ActionItem>? ActionItems { get; set; }
    }  
    public class ActionItem
    {
        public int ActionItemId { get; set; }
        ..
        public int SuiviBEId { get; set; }
        public SuiviBE SuiviBE { get; set; }
    }

I call the method

 ActionItem act = new ActionItem();   
 IEnumerable<SuiviBE>? developers;

  [Parameter] public int suivibeId { get; set; }
    [Parameter] public int ActionItemId { get; set; }

 async Task CreateActionList()
    {        
        act.SuiviBEId = suivibeId;    
       await client.PutAsJsonAsync($"api/etude/{suivibeId}", act);
       await client.PostAsJsonAsync($"api/etude/{suivibeId}", act);
        await client.GetAsync($"api/etude/{suivibeId}");
        uriHelper.NavigateTo($"/etude");
    }

Right now, when I've put the breakpoint suivibeId = 0
Now how I can link dev.SuiviBEId with suivibeId?
image

The KeyProperty is used for something different not related to what you are trying to achieve. Better check the source code of the component for reference.

Thanks to your reply, if the KeyProperty is not appropriate ; how to get the Id from the main line ? I will appreciate your support on it!

Check our hierarchy demos for reference.

If I may ask:
How do you relate the ID of the parent table to the child table.
In the code here [radzen-blazor/DataGridMasterDetailHierarchy.razor at master · radzenhq/radzen-blazor · GitHub]

How you link parent table and the child table?

I see that you include to orders the child table

  protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        orders = dbContext.Orders.Include("Customer").Include("Employee").Include("OrderDetails").Include("OrderDetails.Product").ToList();
    }

But In my case I would like have Idp of the parent table to link Ide of the child table i.e

For example : Idp = 1 for Ide =1, 2, 3 ...

Include() method is the way to tell EF to expand (populate) sub properties (both collections and navigation properties).

In this demo for example the master DataGrid will list orders and every Order have OrderDetails which is populated in a single request using Include():

You can also populate the child records manually as shown in this demo:

The RowExpand argument is the data item where you can get desired id.

Thanks I will check it and I will come back to you.

Hi, I come back to you because there are some questions.
As you understood, I want to rendering the datagrid (child) un the master datagrid.
To do tthat I've created FK one to many.

The configuration of my code is :
Get Method

   [HttpGet]
        public async Task<IActionResult> Get()
        {
            var devs = await _context.SuiviBEs.Include(a => a.ActionItems).ToListAsync();
            return Ok(devs);
        }

Razor page

<RadzenDataGrid @ref="grid"   ...  Data="@developers" TItem="SuiviBE" />
          <Template Context="developers">
         
         <RadzenDataGrid @ref="gridaction"  AllowFiltering="true" AllowPaging="true" PageSize="5" AllowSorting="true" EditMode="DataGridEditMode.Single"
                Data="@dev.ActionItems" TItem="ActionItem" CellRender="@CellRender" RowRender="@RowRender" ExpandMode="DataGridExpandMode.Single"
                SelectionMode="DataGridSelectionMode.Single">
               <Columns>
                   <RadzenDataGridColumn TItem="ActionItem" Property="ActionItemId" Title="ActionItemId" Width="80px"/> 
                   <RadzenDataGridColumn TItem="ActionItem" Property="SuiviBEId" Title="SuiviBEId" Width="80px"/>                      
                   <RadzenDataGridColumn TItem="ActionItem" Property="ECR" Title="Title" Width="80px"/>
                   <RadzenDataGridColumn TItem="ActionItem" Property="ECO" Title="Description" Width="80px"/>
                   
                     <RadzenDataGridColumn TItem="ActionItem" Property="ActionItemId" Context="action" Filterable="false" Sortable="false" TextAlign="TextAlign.Left" Width="50px">
                       <Template Context="action">
                           <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Secondary" Size="ButtonSize.Small"  @onclick:stopPropagation="true" />
                       </Template>
                   </RadzenDataGridColumn>
               </Columns>
         </RadzenDataGrid> 

          </Template>

    <Columns>
         
                  
        <RadzenDataGridColumn TItem="SuiviBE" Context="developers" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Width="156px">
            <Template Context="developers">
                <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(args => EditRow(developers))" @onclick:stopPropagation="true">
                </RadzenButton>
                 <RadzenButton Variant="Variant.Outlined" Text="A" Size="ButtonSize.Small" Click="@(args => CreationAction(developers.SuiviBEId))" @onclick:stopPropagation="true">
                  </RadzenButton>
            </Template>
             <EditTemplate Context="developers">
                <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRow(developers))">
                </RadzenButton>
               
             </EditTemplate>
        </RadzenDataGridColumn>
    </Columns>


@code{
RadzenDataGrid<ActionItem>? gridaction;
RadzenDataGrid<SuiviBE>? grid; 

    [Parameter] public bool WithColumnPicker { get; set; } = false;
    [Parameter] public int suivibeId { get; set; } 
    [Parameter] public int ActionItemId { get; set; }

    ActionItem act = new ActionItem();
  
    IEnumerable<SuiviBE>? developers;

    protected override async Task OnInitializedAsync()
    {
        developers= await client.GetFromJsonAsync<SuiviBE[]>($"api/etude");
        
    }  

    async Task CreationAction(int actionId)
    {
         act.SuiviBEId = actionId;
         // dev= await client.GetFromJsonAsync<SuiviBE>($"api/etude/{actionId}");

        var result = await DialogService.OpenAsync("Description de l'action", ds =>
        @<div>                                        
                       <div class="row">
                             <div class="col">
                                 <RadzenHtmlEditor @bind-Value=@act.DescriptionA style="height: 500px; margin-bottom: 1rem;" UploadUrl="upload/image" />
                                 <RadzenButton Text="Update" Icon="report" ButtonStyle="ButtonStyle.Light" Click=@CreateActionList />
                                 <RadzenButton Text="Ok" Click="() => ds.Close(true)" Class="mr-1" Style="width: 80px;" />
                                 <RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Secondary" Class="mr-1" />   
                                                            
                             </div>
                        </div>  
            </div>
        ); 

       async Task CreateActionList()
       {
         await client.PutAsJsonAsync($"api/etude/{act.SuiviBEId}", act);     
         uriHelper.NavigateTo($"etude");
       } 
    }

}

With this configuration there is a message error :

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Response status code does not indicate success: 500 (Internal Server Error).
System.Net.Http.HttpRequestException: Response status code does not indicate success: 500 (Internal Server Error).
at System.Net.Http.HttpResponseMessage.EnsureSuccessStatusCode()
at System.Net.Http.Json.HttpClientJsonExtensions.d__13`1[[ServiceDT.Shared.Models.SuiviBE[], ServiceDT.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at ServiceDT.Client.Pages.Etude.OnInitializedAsync() in C:\App\sbd\ServiceDT\ServiceDT\Client\Pages\Etude.razor:line 217
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

If I modify the GEt method w/o include() as below, there are any error but the child table is not rendering.

 [HttpGet]
        public async Task<IActionResult> Get()
        {
            var devs = await _context.SuiviBEs.ToListAsync();
            return Ok(devs);
        }

If I put a breakpoint on get method the FK one to many is well populated.

So I will appreciate your advise about this bug, my code I suppose, but I didn't see where I've made a mistake.

,

Not sure what bug you are reporting - your server errors with status code 500, which means internal server error. Check the response for details.