Hierarchy Grid expanded row

[Walter Martin]

Is there a way to change the background color of the expanded row in a Hierarchy Grid ?

I mean the row where I click on the arrow to expand the details and not the background color of the details.

When I click on the arrow, the rowselected event is not fired so I don't know the css I can use for this row

Thanks

[Renjith Singh Rajendran]

Hi Walter,

Greetings from Syncfusion support.

We suggest you to achieve this requirement using Microsoft JSInterop. We have bind DetailDataBound event to grid and in this event handler we have called a JS method(AddRowStyle) with the row index(fetched using GetRowIndexByPrimaryKeyAsync) to add style for the corresponding expanded row.

Reference :

https://blazor.syncfusion.com/documentation/datagrid/events#detaildatabound

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetRowIndexByPrimaryKeyAsync_System_Object_

Please refer the codes below. We have also attached a sample in this ticket for your reference.

 

<GridEvents TValue="OrdersDetails" DetailDataBound="DetailDataBound"></GridEvents>

 

<style>

    .color-expanded-row {

        background-color: orangered;

    }

</style>  

 

    SfGrid<OrdersDetails> GridRef;

    public async Task DetailDataBound(DetailDataBoundEventArgs<OrdersDetails> args)

    {

        var rowindex = await GridRef.GetRowIndexByPrimaryKeyAsync(args.Data.OrderID);

        await JS.InvokeAsync<object>("AddRowStyle", rowindex);

    }

 

 

[JavaScript.js]

 

function AddRowStyle(index) {

    document.getElementById("GridID").getElementsByClassName("e-row")[index].classList.add("color-expanded-row");

}

 

Please get back to us if you need further assistance.

Regards,

Renjith R

[Renjith Singh Rajendran]

Please download and refer the attached sample.

Attachment: ServerApp_ecbf2a2f.zip

[Walter Martin]

thanks a lot, it works

[Renjith Singh Rajendran]

Hi Walter,

Thanks for your update. Please get back to us if you need further assistance.

Regards,

Renjith R