No Detail row collapse method

[gil shalit]

The Grid DetailDataBound event is called when a Detail row is expanded, but there is no event that is called when such a row is collapsed. This makes it impossible if and how many detail rows are expanded. I need this because I want to disable editing in the main grid while detail rows are expanded.

Throughout the years this has been requested and it seems easy to implement...

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.

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()

{

    // Add any custom logic you need

}

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_249e31c3.7z