Is it possible to show a different row template when the row is selected?

[Joseph Tan]

I have a grid and I want to show  more detail in the grid, if the row is selected.

Something ideal would be a "SelectedTemplate", e.g. 

   <GridColumn Field="Details" HeaderText="Details" >

    <Template> <div>When Not Selected</div></Template>

    <SelectedTemplate> <div>When Selected, more data is shown</div></ Selected Template>

</GridColumn>

Is there an easy way to achieve this?  I thought of using EditTemplate, but that requires the user to double click the row. 

[Renjith Singh Rajendran]

Hi Joseph, 

Greetings from Syncfusion support. 

Based on this scenario, we suggest you to use DetailTemplate feature of Grid. And then use ExpandCollapseDetailRowAsync method in RowSelected event of grid to achieve this requirement. So now when selecting a row, the detail row will be opened with the details. Please refer the below documentation for more details, 

References :  

https://blazor.syncfusion.com/documentation/datagrid/row/#detail-template 

https://blazor.syncfusion.com/demos/datagrid/detail-template?theme=bootstrap4 

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

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-2145790731 

 

Please refer and use as like the code below, 

<SfGrid @ref="Grid" DataSource="@Orders" Height="400"> 

     <GridEvents RowSelected="RowSelected" TValue="Order"></GridEvents> 

     <GridTemplates> 

       <DetailTemplate> 

         @{ 

                var a = context as Order; 

         } 

         <div>Show row detail Here 

                OrderID : @a.OrderID 

         </div> 

       </DetailTemplate> 

     </GridTemplates> 

    ... 

</SfGrid> 

 

    SfGrid<Order> Grid; 

    public void RowSelected(RowSelectEventArgs<Order> args) 

    { 

        Grid.ExpandCollapseDetailRowAsync(args.Data); 

    } 

Please get back to us if you need further assistance. 

Regards, 

Renjith R