How to enable detail template for any specific row?

[Isara]

I would like to enable detail template for any specific row.
Is that possible? If so please let me know how.

Thanks

[Isara]

Let me explain my requirement in more details.

By default, if a grid has a detail template configured, all rows will have detail template included.
In my case I would like to allow only some rows to have a detail template while the others does not.

For example, if I have 10 rows on a grid with detail template configured but I want only row #2 and row #4 to have a detail view while the rest of them do not have it.
How should I do that? 

Any code example would be much appreciated.

Thanks

[Pavithra Subramaniyam]

Hi Isara, 

 

Thanks for contacting Syncfusion support. 

 

By default the details template row will be rendered for each rows while expanding the details template icon. So We can prevent rendering of details for the required row by disabling the detail icon and using the condition inside the detail template. Please refer to the below code example and documentation link for more information. 

 

In the below code we have rendered the template based on the condition and disabled the detail icon inside the “RowDataBound” event based on the requirement. 

 

@using Syncfusion.Blazor.Grids 

 

<SfGrid DataSource="@Employees"> 

    <GridEvents RowDataBound="OnRowDataBound" TValue="EmployeeData"></GridEvents> 

    <GridTemplates> 

        <DetailTemplate> 

            @{ 

                var employee = (context as EmployeeData); 

                // Rendering template only for required rows 

                if (employee.EmployeeID % 2 == 0) 

                { 

                <table class="detailtable" width="100%"> 

                    <colgroup> 

                        <col width="35%"> 

                        <col width="35%"> 

                        <col width="30%"> 

                    </colgroup> 

                    <tbody> 

                        .  .  . 

                    </tbody> 

                </table> 

                    } 

                } 

        </DetailTemplate> 

    </GridTemplates> 

    <GridColumns> 

        .  .  . 

    </GridColumns> 

</SfGrid> 

 

<style type="text/css" class="cssStyles"> 

     

    .e-row.e-nodetail .e-detailrowcollapse { 

        pointer-events:none; 

    } 

    .e-row.e-nodetail .e-detailrowcollapse .e-dtdiagonalright { 

        display:none; 

    } 

</style> 

 

@code{ 

    public void OnRowDataBound(RowDataBoundEventArgs<EmployeeData> args) 

    { 

        if(args.Data.EmployeeID % 2 != 0) 

        { 

            // Hide and disabling the Details icon present in each row 

            args.Row.AddClass(new string[] { "e-nodetail"}); 

        } 

    } 

} 

 

 

Documentation: https://blazor.syncfusion.com/documentation/datagrid/events/#rowdatabound  

 

Please get back to us if you have any concern. 

 

Regards, 

Pavithra S 

[Isara]

Wow, that's a nice solution.

Will try soon and let you know the result.

Thanks for a great tip btw.

[Isara]

It works perfectly with no issue!

Thanks

[Kuralarasan Muthusamy]

Hi Isara, 

 

We are happy to hear that your requirement has been achieved. Please get back to us, if you need any further assistance. 

 

Regards, 

Kuralarasan M