We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom GridColumn component appears as the last column

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;

}


3 Replies

SP Sarveswaran Palani Syncfusion Team November 3, 2022 03:12 AM UTC

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



FM François Mouchati November 3, 2022 10:44 AM UTC

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





KG Keerthana Ganesan Syncfusion Team November 16, 2022 03:33 AM UTC

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>

 




Loader.
Live Chat Icon For mobile
Up arrow icon