DataGrid - RowSelected event not firing when using a Detail Template

[Iain Stirzaker]

Hola,

When using an sfDataGrid with a RowSelected event I can easily get the row ID in the handler, no problem.

If I implement a DetailTemplate within the DataGrid everything works fine but the RowSelected event is longer longer triggered, what am I doing wrong?  Is there a way to get hold of the selected row ID as I need to draw another DataGrid on the screen based on the selected RowID?

Iain

[Monisha Saravanan]

Hi Iain,

Greetings from Syncfusion.

We have prepared a simple sample by using RowSelected event and it triggers fine at our end while selecting the row. Kindly check the below attached sample for your reference.

Sample: https://blazorplayground.syncfusion.com/embed/VXLJZTXSfTdwvGGE?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Additionally we would like to inform you that on selecting the detail template icons will not trigger the RowSelected event. Also we don’t have any events for Grid expand or collapse. Instead, we suggest you to achieve your solution using JavaScript click event. It will be triggered for every click action, and we can filter our required action using class list and inside the condition we can handle our operation based on our requirement. Kindly refer the attached sample and code snippet for your reference.

[index.razor]

public async Task DataBound()

{

    if (IsRefresh)

    {

        var dotNetReference = DotNetObjectReference.Create(this);         

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

 

    }

}

[JSInvokable("DesireMethod")]

public void DesireMethod()

{

  //Handle your own operation here

}

[javascript.js]

var dotnetInstance;

 

document.addEventListener('click', function (args) {

    if ((args.target.classList.contains('e-icon-gdownarrow')) || (args.target.classList.contains('e-icon-grightarrow'))) {

        setTimeout(function () {

            dotnetInstance.invokeMethodAsync('DesireMethod');

        }, 400)

 

    }

})

Please get back to us if you have further queries.

Regards,
Monisha

Attachment: SfGridExpandCollapseEvent_b00fb0df.zip

[Iain Stirzaker]

Hola Monisha et al,

Thanks for the prompt response.

Your suggestion enables me to detect a Detail Row Selection in JS when the right-icon is selected but: how do I get access to the unique ID of the row selected?  This very important as I need to update another sfGrid on the page based on the row selected object ID.

Thanks,

Iain

[Prathap Senthil]

Based on your requirement to access the unique row ID of the selected row, we have achieved the following approach to fulfill your requirement. Kindly refer to the modified code snippet and sample provided below for your reference.

//Javascript.js

document.addEventListener('click', function (args) {

    if ((args.target.classList.contains('e-icon-gdownarrow')) || (args.target.classList.contains('e-icon-grightarrow'))) {

 

        var rowElement = args.target.closest('tr');

        var rowId = rowElement.dataset.uid;

        setTimeout(function () {

            dotnetInstance.invokeMethodAsync('DesireMethod' , rowId);

        }, 400)

 

    }

})

Index.Razor
[JSInvokable("DesireMethod")]

public void DesireMethod(string RowId)

{

   //Handle your own operation here

}

Attachment: BlazorApp1_Modified_e5fc9be2.zip