Category / Section
How may different text be used in several ASP.NET Web Forms Grids for the same locale?
4 mins read
By default, Locale to the Grid control will be set same throughout the application. So, Grid’s localized text for all the Property Information will be same and cannot be changed for each individual Grid. However, we can overcome this by setting the required property changes in the ActionBegin and Load event of the Grid.
This KB explains the way to set different localized text for two different Grids.
HTML:
<h3>Orders Grid</h3>
<div id="OrdersGrid"></div>
<h3>Employees Grid</h3>
<div id="EmployeeGrid"></div>
<script type="text/javascript">
$(function () {
$("#OrdersGrid").ejGrid({
allowPaging: true,
load: "onOrderLoad",
actionBegin: "begin_OrdersGrid",
columns: [
{ field: "OrderID", headerText: "Order ID" },
{ field: "CustomerID", headerText: "Customer ID" },
{ field: "EmployeeID", headerText: "EmployeeID" },
{ field: "OrderDate", format: "{0:MM/dd/yyyy}", headerText: "Order Date" }
]
});
$("#EmployeeGrid").ejGrid({
allowPaging: true,
load: "onEmployeeLoad",
actionBegin: "begin_EmployeesGrid",
columns: [
{ field: "EmployeeID", headerText: "Employee ID" },
{ field: "FirstName", headerText: "First Name" },
{ field: "LastName", headerText: "Last Name" },
{ field: "BirthDate", headerText: "Birth Date", format: "{0:MM/dd/yyyy}" }
]
});
});
</script>
Razor:
<h3>Orders Grid</h3>
@(Html.EJ().Grid<object>("OrdersGrid")
.AllowPaging()
.ClientSideEvents(e => e.ActionBegin("begin_OrdersGrid").Load("onOrdersLoad"))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("EmployeeID").HeaderText("EmployeeID").Add();
col.Field("OrderDate").Format("{0:MM/dd/yyyy}").HeaderText("Order Date").Add();
})
)
<h3>Employees Grid</h3>
@(Html.EJ().Grid<object>("Employees Grid")
.AllowPaging()
.ClientSideEvents(e => e.ActionBegin("begin_EmployeesGrid").Load("onEmployeesLoad"))
.Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").Add();
col.Field("FirstName").HeaderText("First Name").Add();
col.Field("LastName").HeaderText("Last Name").Add();
col.Field("BirthDate").Format("{0:MM/dd/yyyy}").HeaderText("Birth Date").Add();
})
)
WebForms:
<h3>Orders Grid</h3>
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >
<ClientSideEvents ActionBegin="begin_OrdersGrid" Load="onOrdersLoad" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:column field="EmployeeID" HeaderText="Employee ID" />
<ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:MM/dd/yyyy}" />
</Columns>
</ej:Grid>
<h3>Employees Grid</h3>
<ej:Grid ID="EmployeesGrid" runat="server" AllowPaging="True">
<clientsideevents ActionBegin="begin_EmployeesGrid" Load="onEmployeesLoad" />
<Columns>
<ej:Column Field="EmployeeID" HeaderText="Employee ID" />
<ej:column field="FirstName" headertext="First Name" />
<ej:column field="LastName" headertext="Last Name" />
<ej:column field="BirthDate" headertext="Birth Date" format="{0:MM/dd/yyyy}" />
</Columns>
</ej:Grid>
.Net Core
<h3>Orders Grid</h3>
<ej-grid id="Grid" allow-paging="true" load="onOrdersLoad" action-begin="begin_OrdersGrid">
<e-columns>
<e-column field="OrderID" header-text="Order ID"></e-column>
<e-column field="CustomerID" header-text="Customer ID"></e-column>
<e-column field="EmployeeID" header-text="Employee ID"></e-column>
<e-column field="OrderDate" header-text="Order Date" format="{0:MM/dd/yyyy}"></e-column>
</e-columns>
</ej-grid>
<h3>Employees Grid</h3>
<ej-grid id="EmployeesGrid" allow-paging="true" load="onEmployeesLoad" action-begin="begin_EmployeesGrid">
<e-columns>
<e-column field="EmployeeID" header-text="Employee ID"></e-column>
<e-column field="FirstName" header-text="First Name"></e-column>
<e-column field="LastName" header-text="Last Name"></e-column>
<e-column field="BirthDate" header-text="Birth Date" format="{0:MM/dd/yyyy}"></e-column>
</e-columns>
</ej-grid>
Now, define the events for each Grid. In the Load event of the Grid, assign the create event to the pager using the model.pageSettings of the Grid. On rendering the ejPager internally by the Grid control, create event will be triggered and the respective localized text will be changed by the localizedLabels property.
Likewise, for the Grid ActionBegin event will change the properties defined within the localizedLabels.
<script>
// Orders Grid events
function onOrdersLoad(args) {
this.model.pageSettings.create = function (args) {
this.localizedLabels.pagerInfo = "{0} of {1} pages ({2} Orders)"
}
}
function begin_OrdersGrid(args) {
if (this.initialRender)
this.localizedLabels.EmptyRecord = "No Orders found";
}
//Employees Grid events
function begin_EmployeesGrid(args) {
if (this.initialRender)
this.localizedLabels.EmptyRecord = "No Employees found";
}
function onEmployeesLoad(args) {
this.model.pageSettings.create = function (args) {
this.localizedLabels.pagerInfo = "{0} of {1} pages ({2} Employees)"
}
}
</script>
Angular2:
<h3>Orders Grid</h3>
<ej-grid id="OrdersGrid" [allowPaging]="true" (load)="onOrdersLoad($e)" (actionBegin)="begin_OrdersGrid($e)" >
<e-columns>
<e-column field="OrderID" headerText="Order ID" ></e-column>
<e-column field="CustomerID" headerText="Customer ID"></e-column>
<e-column field="EmployeeID" headerText="Employee Name"></e-column>
<e-column field="OrderDate" format="{0:MM/dd/yyyy}" headerText="Order Date"></e-column>
</e-columns>
</ej-grid>
<h3>Employees Grid</h3>
<ej-grid id="EmployeesGrid" [allowPaging]="true" (load)="onEmployeesLoad($e)" (actionBegin)="begin_EmployeesGrid($e)">
<e-columns>
<e-column field="EmployeeID" headerText="Employee ID"></e-column>
<e-column field="FirstName" headerText="First Name"></e-column>
<e-column field="LastName" headerText="LastName"></e-column>
<e-column field="BirthDate" format="{0:MM/dd/yyyy}" headerText="Birth Date"></e-column>
</e-columns>
</ej-grid>
import { Component, OnInit, Input, ElementRef } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
constructor() {
}
onOrdersLoad(e) {
var grid = $("#OrdersGrid").ejGrid("instance");
grid.model.pageSettings.create = function (args) {
this.localizedLabels.pagerInfo = "{0} of {1} pages ({2} Orders)"
}
}
begin_OrdersGrid(e) {
var grid = $("#OrdersGrid").ejGrid("instance");
if (grid.initialRender)
grid.localizedLabels.EmptyRecord = "No Orders found";
}
//Employees Grid events
begin_EmployeesGrid(e) {
var grid = $("#EmployeesGrid").ejGrid("instance");
if (grid.initialRender)
grid.localizedLabels.EmptyRecord = "No Employees found";
}
onEmployeesLoad(e) {
var grid = $("#EmployeesGrid").ejGrid("instance");
grid.model.pageSettings.create = function (args) {
this.localizedLabels.pagerInfo = "{0} of {1} pages ({2} Employees)"
}
}
}
Refer to the following Help Document for the different Localized Text Properties used in the Grid and Pager.
https://help.syncfusion.com/js/grid/globalizationandlocalization
https://help.syncfusion.com/js/pager/localization
The following screenshot highlights the difference in the Empty Record text and Pager Information.
Figure. Different Locale Text for Two Grids.
