1. Home
  2. Forum
  3. Blazor
  4. Need help with Hierarchy Grid

Need help with Hierarchy Grid

Hello,

I have a service which returns IEnumerable<ReportDetail> , I want to load these details into a nested grid in my Hierarchy Grid. Currently I can load the details on page load and it works fine but I would rather load the details when you actually click to open up the nested grid.

Ideally I would like an event I can use to load my data when the grid is expanded.

My service does not seem to work with the SFDatamanager.


7 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team March 14, 2022 11:26 AM UTC

Hi Barry, 
 
Greetings from Syncfusion support. 
 
Query : Ideally I would like an event I can use to load my data when the grid is expanded. 
The DetailDataBound event will be triggered when expanding a detail row in Grid. Please refer the below documentation for more details, 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


MM Mark Meyer March 18, 2022 05:22 PM UTC

Hi, I have one follow up question, when expanding one row on a hierarchical grid, can i programmatically

close any others which are opened?


I would like to keep max one row opened. 




RS Renjith Singh Rajendran Syncfusion Team March 21, 2022 11:46 AM UTC

Hi Barry, 
 
We can achieve this requirement by using Microsoft JSInterop. In the below sample, we have invoked the ExpandCollapseDetailRowAsync method of Grid in DetailDataBound event handler. By checking for target and args.data, we will be calling ExpandCollapseDetailRowAsync method. Also, we have used DataBound handler to pass the dotnetreference to JS. By using this dotnetreference, we will be making call from JS to C#, during collapse action in Grid. This C# method will empty the target, when collapse action performed in Grid. 
 
We are attaching the sample for your convenience. 
References :  
 
Please refer the codes below, 
 
 
<GridEvents DetailDataBound="DetailDataBound" DataBound="DataBound" TValue="EmployeeData"></GridEvents>
 
public bool firstrender { get; set; } = true;public async Task DataBound(){    if (firstrender)    {        var dotNetReference = DotNetObjectReference.Create(this);          // create dotnet ref        await Runtime.InvokeAsync<string>("detail", dotNetReference);     // send the dotnet ref to JS side        firstrender = false;    }}public async Task DetailDataBound(DetailDataBoundEventArgs<EmployeeData> args){    if (target != null)    {        if (target == args.Data)                              // return when target is equal to args.data        {            return;        }        await Grid.ExpandCollapseDetailRowAsync(target);    }    target = args.Data;} [JSInvokable("DetailCollapse")]                            // method called from JS when collapse is donepublic void DetailRowCollapse(){    target = null;                                // empty the target when collapse action is done }
public async Task RecordClickHandler(RecordClickEventArgs<EmployeeData> args) 
{ 
    await Grid.ExpandCollapseDetailRowAsync(args.RowData); 
} 
 
[detailexpand.js] 
 
var dotnetInstance; 
 
function detail(dotnet) { 
    dotnetInstance = dotnet; // dotnet instance to invoke C# method from JS  
} 
 
document.addEventListener('click', function (args) { 
    if (args.target.classList.contains("e-dtdiagonaldown") || args.target.classList.contains("e-detailrowexpand")) { 
        dotnetInstance.invokeMethodAsync('DetailCollapse'); // call C# method from javascript function 
    } 
}) 

 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


MM Mark Meyer March 23, 2022 11:54 AM UTC

Hi,

Your sample app is throwing a javascript error: 

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

    at detailexpand.js:7:38




RS Renjith Singh Rajendran Syncfusion Team March 24, 2022 11:31 AM UTC

Hi Barry, 
 
We have modified the sample to overcome the reported error. Please download and refer the sample form the link below, 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


Marked as answer
MJ Mag Jiraboondilok February 18, 2023 04:32 AM UTC

Hi,


How does this work if i want to display the child Grid component? Also i want to build a component where it can handle like nth level of hierarchy. Like a Grid within Grid within Grid as long as there is a level.

Really Appreciate any suggestion or examples you have.


Thanks


MS Monisha Saravanan Syncfusion Team February 20, 2023 12:10 PM UTC

Hi Mag,


Greetings from Syncfusion


We have prepared an simple sample with nested detail template which collapses on expanding other rows. You can handle the same for all other levels of nested Grid. Kindly check the attached sample for additional information.


Please let us know if you face any difficulties or if you  have further queries.


Regards,

Monisha


Attachment: BlazorApp1_77362af8.zip

Loader.
Up arrow icon