Articles in this section
Category / Section

How different text be used in several ASP.NET MVC Grid for the same locale?

4 mins read

By default, Locale to the ASP.NET MVC 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.

 

Conclusion

I hope you enjoyed learning about how to use different text in different ASP.NET MVC Grids for same locale.

You can refer to our  ASP.NET MVC Grid feature tour page to know about its other groundbreaking feature representations. You can also explore our  ASP.NET MVC Grid examples to understand how to present and manipulate data.

For current customers, you can check out our ASP.NET MVC Controls from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our ASP.NET MVC DataGrid and other ASP.NET MVC controls.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied