In Master/Detail grid, limit to only one row open at a time

Question

I have a master/detail grid that I have created in Blazor. I want to be able to have a limit so that only the detail for one master row is visible at a time. In other words, if the detail for a master row is open and different master row is then selected, only the detail for the latest selected master row is visible.

Jeevakanth Palaniappan · Accepted Answer

Hi Jim,

Greetings from syncfusion support.

We have validated you query and found that you need to expand only the lastly clicked expand/collapse icon. You can achieve your requirement by using the Microsoft JSInterop and binding the javascript click event to check the current target and then invoking the DetailExpandCollapseRow method of grid. Please find the below code snippet and the sample for your reference.

Index.razor

<SfGrid @ref="Grid" ID="Grid" DataSource="@Employees">

<GridEvents DetailDataBound="DetailDataBound" DataBound="DataBound" TValue="EmployeeData"></GridEvents>

..

</SfGrid>

@code{

public bool firstrender { get; set; } = true;

public async Task DataBound()

{

if (firstrender)

{

var dotNetReference = DotNetObjectReference.Create(this);

await Runtime.InvokeAsync<string>("detail", dotNetReference);

firstrender = false;

}

public async Task DetailDataBound(DetailDataBoundEventArgs<EmployeeData> args)

{

if (target != null)

{

if (target == args.Data)

{

return;

}

await Grid.DetailExpandCollapseRow(target);

}

target = args.Data;

}

[JSInvokable("DetailCollapse")]

public void DetailRowCollapse()

{

target = null;

}

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

}

})

Host.cshtml

<head>

..

..

</head>

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11145944381

Please get back to us if you need further assistance.

Regards,

Jeevakanth SP.