Category / Section
How to set different currency format for columns and summary column values
2 mins read
This documentation explains about how to set different currency format for grid columns and its summary value.
Solution:
By default, the format property formats the value based on culture set to the Grid. For currency formats, currency depends upon the culture and hence by default we cannot show different currencies for multiple columns in same grid with a culture set. You can use following solution to show different currency formats for multiple column.
We can achieve this requirement by using queryCellInfo and load event of the grid. In queryCellInfo event we have changed the format of the particular column values by using ej.format method. We have created the helper functions in Grid load event and used that helper functions in the Grid summaryTemplate to change the format of the summaryValues.
Note: We need to refer the respective culture script files to the sample to get the respective format.
HTML
<div id=”Grid”></div>
JS
1. Render the Grid control with the querCellInfo event and load event.
$(function () {
$(“#Grid”).ejGrid({
dataSource: window.summaryData, // jsondata
showSummary: true,
queryCellInfo: “info”,
load: “load”,
summaryRows: [{
summaryColumns: [
{ summaryType: ej.Grid.SummaryType.Average, displayColumn: “Freight”, dataMember: “Freight”, template: “#FreightTemplate”, format: “{0:C2}” },
{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: “TotalAmount”, dataMember: “TotalAmount”, template: “#TotalAmountTemplate”, format: “{0:C2}” },
{ summaryType: ej.Grid.SummaryType.Average, displayColumn: “Amount”, dataMember: “Amount”, format: “{0:C2}” }
]
}],
columns: [
{ field: “OrderID”, headerText: “OrderID”, isPrimaryKey: true, width: 70 },
{ field: “EmployeeID”, headerText: “EmployeeID”, width: 70 },
{ field: “Amount”, headerText: “Amount”, width: 70, format: “{0:C2}” },
{ field: “Freight”, headerText: “Freight”, width: 70, format: “{0:C2}” },
{ field: “TotalAmount”, headerText: “TotalAmount”, width: 70, format: “{0:C2}” }
]
});
});
Razor
@(Html.EJ().Grid<object>(“Grid”)
.Datasource((IEnumerable<object>)ViewBag.datasource)
.ShowSummary()
.SummaryRow(row =>
{
row.SummaryColumns(col => { col.SummaryType(SummaryType.Average).DisplayColumn(“Freight”).DataMember(“Freight”).Template(“#FreightTemplate”).Format(“{0:C2}”).Add();
{ col.SummaryType(SummaryType.Sum).DisplayColumn(“TotalAmount”).DataMember(“TotalAmount”).Template(“#TotalAmountTemplate”).Format(“{0:C2}”).Add();
{ col.SummaryType(SummaryType.Average).DisplayColumn(“Amount”).DataMember(“Amount”).Format(“{0:C2}”).Add(); }
} }).Add();
})
.Columns(col =>
{
col.Field(“OrderID”).HeaderText(“OrderID”).IsPrimaryKey(true).Width(70).Add();
col.Field(“EmployeeID”).HeaderText(“EmployeeID”).Width(70).Add();
col.Field(“Amount”).HeaderText(“Amount”).Width(70).Format(“{0:C2}”).Add();
col.Field(“Freight”).HeaderText(“Freight”).Width(70).Format(“{0:C2}”).Add(); col.Field(“TotalAmount”).HeaderText(“TotalAmount”).Width(70).Format(“{0:C2}”).Add();
})
.ClientSideEvents(eve => { eve.QueryCellInfo(“info”).Load(“load”); })
)
Controller
namespace Sample.Controllers
{
public partial class GridController : Controller
{
public static List<Orders> order = new List<Orders>();
public ActionResult GridFeatures()
{
ViewBag.datasource = order;
return View();
}
}
}
ASPX
<ej:Grid ID=”Grid” runat=”server” ShowSummary=”true”>
<SummaryRows>
<ej:SummaryRow>
<SummaryColumn>
<ej:SummaryColumn SummaryType=”Average” DisplayColumn=”Freight” DataMember=”Freight” Template=”#FreightTemplate” Format=”{0:C2}” />
<ej:SummaryColumn SummaryType=”Sum” DisplayColumn=”TotalAmount” DataMember=”TotalAmount” Template=”#TotalAmountTemplate” Format=”{0:C2}” />
<ej:SummaryColumn SummaryType=”Average” DisplayColumn=”Amount” DataMember=”Amount” Format=”{0:C2}” />
</SummaryColumn>
</ej:SummaryRow>
</SummaryRows>
<Columns>
<ej:Column Field=”OrderID” HeaderText=”OrderID” IsPrimaryKey=”True” Width=”70” />
<ej:Column Field=”EmployeeID” HeaderText=”EmployeeID” Width=”70” />
<ej:Column Field=”Amount” HeaderText=”Amount” Width=”70” Format=”{0:C2}”></ej:Column>
<ej:Column Field=”Freight” HeaderText=”Freight” Width=”70” Format=”{0:C2}” />
<ej:Column Field=”TotalAmount” HeaderText=”TotalAmount” Width=”70” Format=”{0:C2}”></ej:Column>
</Columns>
<ClientSideEvents QueryCellInfo=”info” Load=”load” />
</ej:Grid>
Controller
namespace Sample
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = new NorthwindDataContext().OrdersViews.ToList();
this.Grid.DataBind();
}
}
}
Core
<ej-grid id=”Grid” datasource=”ViewBag.dataSource” show-summary=”true” query-cell-info=”info” load=”load”>
<e-summary-rows>
<e-summary-row>
<e-summary-columns>
<e-summary-column summary-type=”Average” display-column=”Freight” datamember=”Freight” template=”#FreightTemplate” format=”{0:C2}” />
<e-summary-column summary-type=”Sum” display-column=”TotalAmount” datamember=”TotalAmount” template=”#TotalAmountTemplate” format=”{0:C2}” />
<e-summary-column summary-type=”Average” display-column=”Amount” datamember=”Amount” format=”{0:C2}” />
</e-summary-columns>
</e-summary-row>
</e-summary-rows>
<e-columns>
<e-column field=”OrderID” header-text=”OrderID” is-primary-key=”true” width=”70”></e-column>
<e-column field=”EmployeeID” header-text=”EmployeeID” width=”70”></e-column>
<e-column field=”Amount” header-text=”Amount” width=”70” format=”{0:C2}”></e-column>
<e-column field=”Freight” header-text=”Freight” width=”70” format=”{0:C2}”></e-column>
<e-column field=”TotalAmount” header-text=”TotalAmount” width=”70” format=”{0:C2}”></e-column>
</e-columns>
</ej-grid>
Controller
namespace core1.Controllers
{
public partial class GridController : Controller
{
public static List<Orders> order = new List<Orders>();
public ActionResult GridFeatures()
{
ViewBag.dataSource = order;
return View();
}
}
}
QueryCellInfo event
2. Changing the format of the grid column values
function info(args) {
if (args.column.field == “Freight”)
$(args.cell).text(ej.format(args.rowData.Freight, “C2”, “ro-RO”)); // Change the format of the Freight column values
if (args.column.field == “TotalAmount”)
$(args.cell).text(ej.format(args.rowData.TotalAmount, “C2”, “bo-CN”)); // Change the format of the TotalAmount column values
}
Load event
3. Creating the helper functions
function load(args){
var helpers = {
Freight: function () {
var obj = $(“#Grid”).ejGrid(“instance”); // Grid instance
var value = ej.avg(obj.model.dataSource, “Freight”); // Find the sum of Freight
return ej.format(value, “C2”, “ro-RO”); // Change the format of the value
},
TotalAmount: function () {
var obj = $(“#Grid”).ejGrid(“instance”); // Grid instance
var value = ej.sum(obj.model.dataSource, “TotalAmount”); // Find the sum of TotalMount
return ej.format(value, “C2”, “bo-CN”); // Change the format of the value
}
};
$.views.helpers(helpers);
};
Templates
4. Using the created helper functions in summary template.
<script id=”FreightTemplate” type=”text/x-jsrender”>
{{:~Freight()}}
</script>
<script id=”TotalAmountTemplate” type=”text/x-jsrender”>
{{:~TotalAmount()}}
</script>
Angular
We have used same queryCellInfo event to change the particular column values format in angular. But in summaryValue, we have used angular custom pipes in ng-template to achieve this requirement.
1. Render the Grid control with the querCellInfo event.
<ej-grid id=”Grid” [dataSource]=”gridData” [showSummary]=”true” [summaryRows]=”summaryrows” (queryCellInfo)=”CellInfo($event)”> <e-columns> <e-column field=”OrderID” headerText=”OrderID”></e-column> <e-column field=”EmployeeID” headerText=”EmployeeID”></e-column> <e-column field=”Amount” headerText=”Amount”></e-column> <e-column field=”Freight” headerText=”Freight”></e-column> <e-column field=”TotalAmount” headerText=”TotalAmount”></e-column> </e-columns> </ej-grid>
Typescript
export class GridComponent {
public gridData;
public summaryrows;
constructor()
{
this.gridData = [
{
OrderID: 10249, CustomerID: ‘TOMSP’, EmployeeID: 6,
OrderDate: new Date(836505e6), Freight: 11.61, Amount: 12.8, TotalAmount: 45.23
},
{
OrderID: 10250, CustomerID: ‘HANAR’, EmployeeID: 4,
OrderDate: new Date(8367642e5), Freight: 65.83, Amount: 4.23, TotalAmount: 23.3
}
];
this.summaryrows = [
{
summaryColumns: [
{ summaryType: ej.Grid.SummaryType.Average, displayColumn: “Freight”, dataMember: “Freight”, template: “#FreightTemplate”, format: “{0:C2}” },
{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: “TotalAmount”, dataMember: “TotalAmount”, template: “#TotalAmountTemplate”, format: “{0:C2}” },
{ summaryType: ej.Grid.SummaryType.Average, displayColumn: “Amount”, dataMember: “Amount”, format: “{0:C2}” }
]
}];
}
}
QueryCellInfo event
2. Changing the format of the grid column values.
CellInfo(args)
{
if (args.column.field == “Freight”)
$(args.cell).text(ej.format(args.rowData.Freight, “C2”, “ro-RO”)); // Change the format of the Freight column values
if (args.column.field == “TotalAmount”)
$(args.cell).text(ej.format(args.rowData.TotalAmount, “C2”, “bo-CN”)); // Change the format of the TotalAmount column values
}
Angular custom pipes
3. Creating the angular custom pipe.
Import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({name: ‘ejgrid’})
export class EJGridPipe implements PipeTransform {
transform(value: number, exponent: any): number {
if(!ej.isNullOrUndefined(value))
{
var val = value.split(“$”);
if(exponent.dataMember == “Freight”)
return ej.format(parseFloat(val[1]), “C2”, “ro-RO”); // change the Freight column summaryValue format
else
return ej.format(parseFloat(val[1]), “C2”, “bo-CN”); // change the TotalAmount column summaryValue format
}
}
}
Angular template
4. using the created custom pipe in ng-template.
<ng-template e-summary-template let-data>
<p> {{data.summaryValue | ejgrid: data.summaryColumn}} </p>
</ng-template>
The following screenshot describes the above behavior:
