Custom GridColumn component with template

[Michael Salzlechner]

Trying to create a custom grid column component. have a general example working based on the example given on the forum

is there any way to access properties of the GridColumn inside the template code?

the value passed to the template is the row but i also need to access the field name and other properties to format the data

similar to this but use properties of the GridColumn object such as Field and my own properties

 RenderFragment<object> TemplateCol = (value) =>

    {

        return b =>

        {

            b.AddContent(0,

                @<div>Template Column : @((value as Order).CustomerID)</div>

            );

        };

    };

[Sarveswaran Palani]

Hi Michael,

Greetings from Syncfusion Support.

Query: ”Is there any way to access properties of the GridColumn inside the template code? “

Based on this scenario, you can create a separate component (TemplateColumn.razor) for template column and pass the GridColumn properties details as parameter. 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>

     ...

   </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; }

}

If we have misunderstood your query, please provide the following details,

1. Share Complete grid rendering code
2. Detailed Explanation of your requirement

Above request details will be very helpful for us to further validate the reported query at our end and provide solution as easy as possible.

Regards,

Sarveswaran PK

Attachment: BlazorApp1_f8ff898d.zip