Category / Section
How to enable Localization in Grid?
1 min read
By default, the Grid contains Locale property. To enable localization, specify the culture name as follows.
Note: Refer to the corresponding script file to the project.
JS
<head>
<link href="~/themes/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.syncfusion.com/13.2.0.29/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
<script src="~/scripts/cultures/globalize.culture.en-GB.min.js"></script>
<script type="text/javascript" src="~/scripts/ej.web.all.min.js"></script>
</head>
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
locale: "en-GB",
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey:true},
{ field: "CustomerID", headerText: "Customer ID" }
]
});
});
</script>
MVC
[Index.cshtml]
@(Html.EJ().Grid<OrdersView>("FlatGrid")
.Locale("en-GB")
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right). Add();
col.Field("CustomerID").HeaderText("Customer ID"). Add();
col.Field("Freight").HeaderText("Freight"). Add();
col.Field("ShipCountry").HeaderText("Ship Country "). Add();
}))
[_Layout.cshtml]
<head>
<meta charset="utf-8" />
<link href="~/themes/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.syncfusion.com/13.2.0.29/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
<script src="~/scripts/cultures/globalize.culture.en-GB.min.js"></script>
<script type="text/javascript" src="~/scripts/ej.web.all.min.js"></script>
<script type="text/javascript" src="~/scripts/common/ej.unobtrusive.min.js"></script>
</head>
<body>
@RenderBody()
@Html.EJ().ScriptManager()
</body>
ASP.NET
[.aspx] <ej:Grid ID="OrdersGrid" runat="server" Locale="en-GB" > <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" /> <ej:Column Field="Freight" HeaderText="Freight" /> <ej:Column Field="ShipCountry" HeaderText="Ship Country" /> </Columns> </ej:Grid> Site.Master] <head id="Head1" runat="server"> <link href="~/themes/bootstrap.min.css" rel="stylesheet" /> <link href="http://cdn.syncfusion.com/13.2.0.29/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" /> <script src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script> <script src="~/scripts/cultures/globalize.culture.en-GB.min.js"></script> <script type="text/javascript" src="~/scripts/ej.web.all.min.js"></script> <script type="text/javascript" src="~/scripts/common/ej.webform.min.js"></script> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head>
The following screenshot illustrates the output.
Localization in Grid
