how Collapse Previously opened rows except the one I am expanding when I click expand button?

Question

I was using the code below, but after I updated to version 18.2.0.59 because there was other errors in previous versions this keeps all grid rows collapsed.

public void RowDataBoundHandler(RowDataBoundEventArgs<ActionTemplate> args)

{

_SfGrid.DetailCollapseAll();

}

Jeevakanth Palaniappan · Accepted Answer

Hi Aleqsandre,

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.

Aleqsandre · Answer

Thank You Very much, works fine.

Jeevakanth Palaniappan · Answer

Hi Aleqsandre, 

Thanks for your feedback. Please get back to us if you need further assistance. 

Reagards, 
Jeevakanth SP.

Aleqsandre · Answer

hello, is there any other way to achieve same behavior, because sometimes I am using RowSelected Event and retrieving target. I have highlighted the event. and then this code dose not work correctly.@page "/"@using Syncfusion.Blazor.Grids@inject IJSRuntime Runtime @{ var employee = (context as EmployeeData); if (employee.FirstName == "Nancy") {

@employee.FirstName @employee.LastName is doing his project titled @employee.Title

} else if (employee.FirstName == "Andrew") {

@employee.FirstName @employee.LastName is doing his project titled @employee.Title . And he belongs to @employee.Country

} else {

@employee.FirstName @employee.LastName from @employee.Country is doing his project titled @employee.Title

} } @code{ SfGrid Grid; public List Employees { get; set; } EmployeeData target; protected override void OnInitialized() { Employees = Enumerable.Range(1, 5).Select(x => new EmployeeData() { EmployeeID = x, FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[x - 1], LastName = (new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[x - 1], Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager", "Inside Sales Coordinator" })[new Random().Next(4)], HireDate = DateTime.Now.AddDays(-x), City = (new string[] { "Seattle", "Tacoma", "Redmond", "Kirkland", "London" })[x - 1], Country = (new string[] { "USA", "UK" })[new Random().Next(2)], }).ToList(); } public bool firstrender { get; set; } = true; public async Task DataBound() { if (firstrender) { var dotNetReference = DotNetObjectReference.Create(this); await Runtime.InvokeAsync("detail", dotNetReference); firstrender = false; } } public void Rowselected(RowSelectEventArgs args) { target = args.Data; } public async Task DetailDataBound(DetailDataBoundEventArgs args) { if (target != null) { if (target == args.Data) { return; } await Grid.DetailExpandCollapseRow(target); } target = args.Data; } [JSInvokable("DetailCollapse")] public void DetailRowCollapse() { target = null; } public class EmployeeData { public int? EmployeeID { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Title { get; set; } public DateTime? HireDate { get; set; } public string City { get; set; } public string Country { get; set; } }}

Jeevakanth Palaniappan · Answer

Hi Aleqsandre, 

We have validated your query by binding the RowSelected event in the previously provided sample but we are unable to reproduce the reported problem. Please find the validated sample and the video demo for your reference. 

Video demo -  https://www.syncfusion.com/downloads/support/directtrac/general/ze/RowSelectedwithDetailsTemp-40197636  

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1446146413  

If you are still facing the reported problem then kindly share the below details. 


Share us the Syncfusion NuGet version details.
Share us the simple issue reproducing sample or reproduce the issue in the provided sample.

The above requested details will be helpful for us to validate the issue and provide you with a better solution as early as possible. 

Regards, 
Jeevakanth SP.

Aleqsandre · Answer

Hello, I have provided video with problem and for the same code Sample.Attachment: problemmmm_5199a3f1.rar

Aleqsandre · Answer

if there is an event which is called before DetailDataBound Event, than we can use Grid.DetailCollapseAll() and problem is solved. In blazor version 18.1 this kind of event was RowDataBound, but in newer versions it is called after DetailDataBound Event. Is it even correct that in newer versions RowDataBound is called after DetailDataBound instead of vice versa? all these when pressing Grid expand button.

Aleqsandre · Answer

Here is 18.1 version which works excellent when clicking the expand button :)Attachment: BlazorApp1_2b97bfd5.rar

Jeevakanth Palaniappan · Answer

Hi Aleqsandre, 

We have checked the shared video. The reported problem is reproducing only when you select the row first and then expanding the row. Here you have modified the target value so that the customized logic also gets changed. If you need args.Data for your requirement then we request you to set it in a new variable and do not change the customized logic. 

Regards, 
Jeevakanth SP.

Im Im · Answer

.. .. @code{ private EmployeeData ? currentlyExpandedRow; private async Task OnRowExpanding(DetailsExpandedEventArgs< EmployeeData > args) { if (currentlyExpandedRow is not null && currentlyExpandedRow != args.Data) { await Grid.ExpandCollapseDetailRowAsync(currentlyExpandedRow); } currentlyExpandedRow = args.Data; }}

Prathap Senthil · Answer

Hi
Im Im,

Before proceeding with the reporting problem, we require some additional
clarification from your end. Please share the following details to proceed
further at our end:
 Are
     you facing any issues with DetailDataBound or DetailsExpanded event?
 Could
     you please share with us when you encountered the error?
 To analyze
     the reported issue, could you please share a simple and reproducible
     sample that demonstrates the problem? This will assist us in identifying
     the issue more efficiently and providing a resolution.
 Please
     provide us with a video demonstration of the issue, along with the
     replication steps.
The
above-requested details will be very helpful for us to validate the reported
query at our end and provide a solution as early as possible.
Regards,
Prathap S