How to resolve the Uncaught TypeError, when applying the format string as {0:###,##0.00} with the Locale?
Problem
Script error throws when using format with the locale in the Grid.
Cause
The Grid uses the JQuery Globalize plugin to format the text. Globalize does not support such a format {0:###.00}.
Solution
You can use the Globalize format with the locale support to resolve this issue. The following link represents the supported formats in the Globalize plugin.
https://github.com/jquery/globalize/tree/79ae658b842f75f58199d6e9074e01f7ce207468#numbers
The input to the column format value should be wrapped between “{0:”and “}” as follows:
Number : {0:N2} Percentage : {0:P2} Currency : {0:C2} Date : {0:dd/MM/yyyy} |
JS
<script src="scripts/globalize.culture.de-DE.min.js"></script>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// The datasource "window.gridData" is referred from jsondata.min.js.
dataSource: window.gridData,
allowPaging: true,
locale: "de-DE",
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 100 },
{ field: "CustomerID", headerText: 'Customer ID', width: 100 },
{ field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 100 },
{ field: "Freight", headerText: 'Freight', format: "{0:C2}", width: 100 },
{ field: "OrderDate", headerText: 'Order Date', format: "{0:MM/dd/yyyy}", width: 100 },
{ field: "ShipName", headerText: 'Ship Name', width: 100 },
{ field: "ShipCountry", headerText: 'Ship Country', width: 100 }
] });
});
</script>
MVC
<script src="@Url.Content('~/Scripts/ globalize.culture.de-DE.min.js')"></script>
@(Html.EJ().Grid<Sample.OrdersView>("Grid")
.Datasource(Model)
.AllowPaging()
.Locale("de-DE")
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(100).Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(100).Format("{0:C2}").Add();
col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(100).Format("{0:MM/dd/yyyy}").Add();
col.Field("ShipName").HeaderText("Ship State").Width(100).Add();
col.Field("ShipCountry").HeaderText("ShipCountry").Width(100).Add();
})
)
ASP
<script src="scripts/globalize.culture.de-DE.min.js"></script>
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" Locale="de-DE">
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="100" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="100" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="100" Format="{0:C}" />
<ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="100" Format="{0:MM/dd/yyyy}" />
<ej:Column Field="ShipName" HeaderText="Ship Name" Width="100" />
<ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="100" />
</Columns>
</ej:Grid>
The following screenshot shows formatting applied to the freight column.
I hope you enjoyed learning about how to resolve the Uncaught TypeError, when applying the format string as {0:###,##0.00} with the Locale.
You can refer to our .NET WebForms Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
