Custom GridColumn component with templat

[Michael Salzlechner]

trying to create a custom gridcolumn component. looked at some of the existing posts but not sure how to make this work

here is the original column i want to make into a reusable component (simplified of course)

<GridColumn HeaderText="Durat" Width="120">
  <Template>
    @{
      var rowdt = (context as MyModel);
      <div>@rowdt.colval</div>
    }
  </Template>
</GridColumn>

and this is what i would like it to look like after making a reusable component

<MyGridColumn HeaderText="Durat" Width="120"></MyGridColumn>

trying the following

@using Syncfusion.Blazor.Grids
@inherits GridColumn

​<CascadingValueValue="@this">

<Template>
    @{
      var rowdt = (context as MyModel);
      <div>@rowdt.colval</div>
    }
  </Template>

​</CascadingValue>

​


​

[Naveen Palanivel]

Hi Michael,

Greetings from Syncfusion support

Based on your query, we could see that you are using a template column and want to make it reusable by creating a Custom GridColumn component with a Template. We have prepared a custom GridColumn component with a Template as a reusable component based on your requirements. Here, the customized Grid column component with a template is created by inheriting the GridColumn class in the Razor page. Kindly check the attached sample and code snippet for your reference.

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.DropDowns

 

<SfGrid DataSource="@Orders" @ref="GridRef" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315" EnableAutoFill="true"

        AllowSelection="true">

 

    <GridColumns>

 

        <GridColumn Field="@nameof(Order.OrderDate)" HeaderText="First"></GridColumn>

        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="OrderID"></GridColumn>

        <MyGridColumn FieldName="@nameof(Order.CustomerID)" T="Order" HeaderText="Middle"></MyGridColumn>

        <GridColumn Field="@nameof(Order.Freight)" HeaderText="last"></GridColumn>

 

    </GridColumns>

</SfGrid>

 

MyGridColumn.razor

@using Syncfusion.Blazor.Grids

@inherits GridColumn

@typeparam T

@ChildContent

 

@code {

    [Parameter]

    public string FieldName { get; set; }

 

   

    RenderFragment<object> TemplateCol;

 

    protected override void OnInitialized()

    {

        base.OnInitialized();

        Field = FieldName;

        Width = "130";

 

        //Initialize TemplateCol inside OnInitialized

        TemplateCol = (value) =>

        {

            var ColumnName = FieldName;

 

          

            var FieldValue = value?.GetType()

                                   .GetProperty(ColumnName)

                                   ?.GetValue(value)

                                   ?.ToString() ?? string.Empty;

 

            return b =>

            {

                b.AddContent(0,

                    (MarkupString)$"<b>{FieldValue}</b>"

                );

            };

        };

 

        Template = TemplateCol;

    }

}

 

Please let us know if you need any further assistance

Regards,
Naveen

Attachment: Server_App_1a3a9315.zip