Skip to content

Remove format property in final column #6361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: development
Choose a base branch
from
Open

Remove format property in final column #6361

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
810d4e7
Remove format property in final column
NithyaSivaprakasam Jul 30, 2025
73beaa6
Update column-template.md
NithyaSivaprakasam Jul 30, 2025
cb4cd5a
Update column-template.md
NithyaSivaprakasam Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions blazor/datagrid/column-template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

Syncfusion Blazor DataGrid provides a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) option that allows you to display custom elements in a column instead of the field value. This can be useful when you need to display images, buttons, or other custom content within a column.

> Before adding column template to the Grid, it is recommended to go through the [template](./templates/#templates) section topic to configure the template.
> Before adding column template to the Grid, it is recommended to go through the [template](https://blazor.syncfusion.com/documentation/datagrid/templates#templates) section topic to configure the template.

To know about **Column Template** in Grid, you can check this video.

Expand Down Expand Up @@ -755,12 +755,14 @@ In the example below, a new column called **FinalCost** is created to display th
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type=ColumnType.Date TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.ManfCost) HeaderText="Manufacturing Cost" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.LabCost) HeaderText="Labor Cost" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.FinalCost) HeaderText="Final price" Format="C2" TextAlign="TextAlign.Center" Width="120">
<GridColumn Field=@nameof(Order.FinalCost) HeaderText="Final price" TextAlign="TextAlign.Center" Width="120">
<Template>
@{
var value = (context as Order);
var finalAmount = value.ManfCost + value.LabCost;
<div>$@finalAmount</div>
var value = (context as Order);
var finalAmount = value.ManfCost + value.LabCost;
decimal finalAmountDouble = Convert.ToDecimal(finalAmount);
var finalAmountString = finalAmountDouble.ToString("C2");
<div>@finalAmountString</div>
}
</Template>
</GridColumn>
Expand Down Expand Up @@ -793,7 +795,7 @@ In the example below, a new column called **FinalCost** is created to display th
{% endhighlight %}
{% endtabs %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVoNfKNztPbnpjL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhejQUiCwvnURGw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## How to get the row object by clicking on the template element

Expand Down Expand Up @@ -1193,4 +1195,4 @@ The following GIF represents template routing in Grid

## See also

* [FileUpload in Grid Column Template](https://www.syncfusion.com/forums/151021/fileupload-in-grid-column-template)
* [FileUpload in Grid Column Template](https://www.syncfusion.com/forums/151021/fileupload-in-grid-column-template)