I want to provide detail template of datagrid control only in specific row

[destolee]

Blazor DataGrid Detail Template Example - Syncfusion Demos

I want to provide detail template of datagrid control only in specific row.

Is there a way? 

[Vignesh Natarajan]

Hi Asdf,  

 

Thanks for contacting Syncfusion support.  

 

Query: “I want to provide detail template of datagrid control only in specific row. Is there a way?” 

 

We have analyzed your query and we suggest you to achieve your requirement using RowDataBound event of Grid. RowDataBound event will be triggered when row is created. We suggest you to add specific style to particular row to hide the detail template based on your condition.    

 

<SfGrid DataSource="@Employees" Height="315px"> 

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

    <GridTemplates> 

        <DetailTemplate> 

            @{ 

                var employee = (context as EmployeeData); 

                <SfGrid DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))"> 

                    <GridColumns> 

                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn> 

                        <GridColumn Field=@nameof(Order.CustomerName) HeaderText="Last Name" Width="110"></GridColumn> 

                        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Title" Width="110"></GridColumn> 

                    </GridColumns> 

                </SfGrid> 

            } 

        </DetailTemplate> 

    </GridTemplates> 

    <GridColumns> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn> 

    </GridColumns> 

</SfGrid> 

<style> 

    /*to disbale the mouse actions*/ 

    .e-detail-disable .e-detailrowcollapse { 

        pointer-events: none; 

    } 

  

        /*if required hide the icons*/ 

        .e-detail-disable .e-detailrowcollapse .e-icon-grightarrow { 

            visibility: hidden; 

        } 

</style> 

  

  

@code{ 

    public void RowDataBound(RowDataBoundEventArgs<EmployeeData> Args) // will be triggered when row is created 

    { 

        if (Orders.Where(x => x.EmployeeID == Args.Data.EmployeeID).ToList().Count == 0) // check condition here whether the detail grid has records 

        { 

            Args.Row.AddClass(new string[] { "e-detail-disable" }); 

        } 

    } 

 

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/164653/ze/DataGrid684737940  

 

Refer our UG documentation for your reference 

 

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

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan