Reusable Column Templates

[Michael Salzlechner]

is it possible to create a reusable column template for the DataGrid?

[Monisha Saravanan]

Hi Michael, 

                           

Thanks for contacting Syncfusion support. 

Yes,  we can render a reusable template component for all the columns in DataGrid control. We have used an separate [TemplateColumn.razor] component to display an text in GridColumn and we have reused that component in all Grid Column using Column Template. Custom component can be defined inside the ColumnTemplate of GridColumn to show required value in custom way. Here we have used TemplateColumn component to display the value.  

We have passed the column name and current record details to Custom template component to display the corresponding value in column. Please find the below code snippet and attached sample for your reference. 

[index.razor] 

 

<SfGrid DataSource="@Orders" @ref="Grid" AllowFiltering="true" AllowPaging="true"> 

   <GridPageSettings PageSize="5"></GridPageSettings> 

   <GridColumns> 

       

     <GridColumn HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"> 

         <Template> 

             @{ 

                 var employee = (context as Order); 

                 <TemplateColumn ColumnName="OrderID" Value= "@(employee)"></TemplateColumn> 

             } 

         </Template> 

     </GridColumn> 

     <GridColumn HeaderText="Customer Name" Width="150"> 

         <Template> 

             @{ 

                 var employee = (context as Order); 

                 <TemplateColumn ColumnName="CustomerID" Value= "@(employee)"></TemplateColumn> 

             } 

         </Template> 

     </GridColumn> 

     <GridColumn HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"> 

         <Template> 

             @{ 

                 var employee = (context as Order); 

                 <TemplateColumn ColumnName="OrderDate" Value= "@(employee)"></TemplateColumn> 

             } 

         </Template> 

     </GridColumn> 

     <GridColumn HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"> 

         <Template> 

             @{ 

                 var employee = (context as Order); 

                 <TemplateColumn ColumnName="Freight" Value= "@(employee)"></TemplateColumn> 

             } 

         </Template> 

     </GridColumn> 

   </GridColumns> 

</SfGrid> 

[TemplateColumn.razor] 

 

<div> 

   @Value.GetType().GetProperty(ColumnName).GetValue(Value) 

</div> 

 

@code{ 

    [Parameter] 

    public Order Value { get; set; } 

 

    [Parameter] 

    public string ColumnName { get; set; } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/171601/ze/BlazorApp12123630307.zip 

Refer our UG documentation for your reference 

https://blazor.syncfusion.com/documentation/datagrid/column-template 

https://blazor.syncfusion.com/documentation/datagrid/templates#template-context 

Kindly revert us if you have any queries 

Regards, 

Monisha S