Collapse row detail event

[Hoang Nguyen]

Hi,

Is there a way to handle the collapse row detail event on the grid component?

thank you for your help.

Stéphane.

[Vignesh Natarajan]

Hi Hoang,  

Thanks for contacting Syncfusion support.  

Query: “Is there a way to handle the collapse row detail event on the grid component?” 

We have analyzed your query and we would like to inform you that we do not have support for an event to be triggered while collapsing a details template. We have support for DetailDataBound event which will be triggered while expanding a detail template.  

Kindly share more details on your requirement and also share the actions you are willing to perform in details collapse event. It will very helpful for us to analyze your requirement further and provide an solution to achieve your requirement.  

Regards, 

Vignesh Natarajan  

[gil shalit]

Hello, has this been addressed since 2021, i.e. has a DetailRowCollapse event been added.

I am using a multi level hierachy grid and also the edit toolbar, and I want the user to only be able to edit the lowest open level. So I use  DetailDataBound to disable the toolbar if a detailrow is opened, but I cant enable it when the sub detail rows are closed.

Thanks!

[Sanjay Kumar Suresh]

Hi Gil,

We have implemented a workaround by creating an event to achieve your requirement at the sample level. We recommend including a JavaScript method that triggers the event when a detail template is collapsed in the Grid, as shown below. So that you could enable your toolbar button while the event is getting triggered.

Concern Code Snippet:

protected override async Task OnAfterRenderAsync(bool firstRender)

{

    if (firstRender)

    {

        await JSRuntime.InvokeVoidAsync("bindGridCollapseEvent", Grid.ID, DotNetObjectReference.Create(this));

    }

}

…

[JSInvokable]

public void OnDetailRowCollapsed()

{

    // Enable your toolbar button here…

}

Concern JS File Code:

window.bindGridCollapseEvent = (gridId, dotNetHelper) => {

    const gridElement = document.getElementById(gridId);

    if (!gridElement) return;

 

    gridElement.addEventListener("click", (e) => {

        let target = e.target;

 

        // Loop through parents to check if it's a collapse icon

        while (target) {

            if (target.classList.contains("e-detailrowexpand")) {

                // Collapse icon is clicked, trigger Blazor method

                dotNetHelper.invokeMethodAsync("OnDetailRowCollapsed");

                break;

            }

            target = target.parentElement;

        }

    });

};

 

We have attached the relevant sample for your reference. Please check it for more details. Let us know if you need any further assistance.

Regards,

Sanjay Kumar Suresh

Attachment: SupportTickets_d7bb337c.7z