Custom GridColumn component appears as the last column

[François Mouchati]

I have a Grid. I introduced a MoneyColumn component and use that column in the middle of the grid amongst other "regular" GridColumn. Yet, the MoneyColumn is displayed as the last column of the grid. It is not displayed at the position at which it is declared within the Grid.

Here is the component:

@using Syncfusion.Blazor.Grids

<GridColumn HeaderText="@HeaderText" TextAlign="TextAlign.Right" Width="@Width">

    <Template>

        @{

            var money = Money(context);

            if (money >= 0) {<span class ="text-white @PositiveColor p-1 rounded-md">@money.ToString("C2")</span> }

            else {<span class ="text-white @NegativeColor p-1 rounded-md">@money.ToString("C2")</span> }

        }

    </Template>

</GridColumn>

@code {

    [Parameter]public string Width { get; set; } = "auto";

    [Parameter]public string HeaderText { get; set; } = string.Empty;

    [Parameter]public Func<object, decimal> Money { get; set; } = _ => 0M;

    [Parameter]public string PositiveColor { get; set; } = string.Empty;

    [Parameter]public string NegativeColor { get; set; } = string.Empty;

}

[Sarveswaran Palani]

Hi Francois,

Greetings from Syncfusion support.

We have analyzed your query and we would like to inform you that while inheriting the GridColumn class, we can access its properties in the razor code. It is not necessary to define the GridColumn tag searately inside the GridColumnTemplate.razor file. So kindly remove the GridColumn tag from your GridColumnTemplate.razor to resolve the reported issue.

Refer the below code example.

<GridColumns>

 

        <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>

 

        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>

 

        <GridColumnTemplate Field="CustomerName" HeaderText="Customer Name" Width="150"></GridColumnTemplate>

 

        ...

    </GridColumns>

 

 

[GridColumnTemplate.razor]

 

@using Syncfusion.Blazor.Grids

@using static DataGrid.Pages.Index

@inherits GridColumn

<CascadingValue Value="@this">

    @ChildContent

</CascadingValue> 

 

Sample: https://support.syncfusion.com/attachment/download/272375

Please get back to us if you have any further queries.

Regards,

Sarveswaran PK

[François Mouchati]

Thank you for you reply.
However I don't understand how to make it work. The Template markup is not recognized:

[Keerthana Ganesan]

Based on your query. We have made a code example. Kindly refer to the attached code example for your reference

            <Template>

               @{

                   var employee = (context as Order);

                   <FetchData @key=employee.OrderID></FetchData>

               }

            </Template>