EJS Grid (Essential JS 2) localization. How?

[Slava]

Tell me how to translate GRID for another language. In the documentation did not find. Saw only for Essential JS 1.

GRID (documentation)

[Pavithra Subramaniyam]

  

Hi Slava, 

You can achieve localization in Grid by loading translation object in your application in the “load” function and set the value for the “locale” property of Grid. Please refer the code example below and documentation link and sample link . 

[index.chtml] 

<div> 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowGrouping="true" allowFiltering="true" locale="de-DE" allowPaging="true"> 

        <e-grid-columns> 

            ... 

       </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    ej.base.L10n.load({ 

        'de-DE': { 

            'grid': { 

                'EmptyRecord': 'Keine Aufzeichnungen angezeigt', 

                ... 

               'Items': 'Artikel' 

            }, 

            'pager': { 

                'currentPageInfo': '{0} von {1} Seiten', 

                ... 

               'previousPagerTooltip': 'Zum vorherigen Pager' 

            } 

        } 

    }); 

</script> 

Documentation: https://ej2.syncfusion.com/16.1.24/aspnet/documentation/base/localization.html?syntax=tag  

Sample                : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core25054814 

Regards, 

Pavithra S. 

[Slava]

  

Hi Slava, 

You can achieve localization in Grid by loading translation object in your application in the “load” function and set the value for the “locale” property of Grid. Please refer the code example below and documentation link and sample link . 

[index.chtml] 

<div> 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowGrouping="true" allowFiltering="true" locale="de-DE" allowPaging="true"> 

        <e-grid-columns> 

            ... 

       </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    ej.base.L10n.load({ 

        'de-DE': { 

            'grid': { 

                'EmptyRecord': 'Keine Aufzeichnungen angezeigt', 

                ... 

               'Items': 'Artikel' 

            }, 

            'pager': { 

                'currentPageInfo': '{0} von {1} Seiten', 

                ... 

               'previousPagerTooltip': 'Zum vorherigen Pager' 

            } 

        } 

    }); 

</script> 

Documentation: https://ej2.syncfusion.com/16.1.24/aspnet/documentation/base/localization.html?syntax=tag  

Sample                : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core25054814 

Regards, 

Pavithra S. 

It does not work if the table displays such a smog, although it did everything according to the documentation. The table is displayed only as in the example written

[Pavithra Subramaniyam]

Hi Slava, 

We have already created a UG documentation for this “Grid Localization”, but we have faced the same issue while re-direct to the Globalization UG documentation page. So, we have considered this “Globalization documentation link didn’t mapped” as bug and logged the documentation task. It will be on live in upcoming release. Until we suggest you to use following code example to define globalization in EJ2-MVC Grid. 

The Localization library allows you to localize default text content of the Grid. The grid component has static text on some features (like group drop area text, pager information text, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the [locale] value and translation object. 

To load translation object in an application, use load function of L10n class, 

The following example demonstrates the Grid in Deutsch culture, 

[Grid] 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); 

    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); 

 

}).AllowPaging().AllowGrouping().Locale("de-DE").PageSettings(page => page.PageSize(6)).Render() 

 

 

<script> 

        ej.base.L10n.load({ 

            'de-DE': { 

                'grid': { 

                    'EmptyRecord': 'Keine Aufzeichnungen angezeigt', 

                    'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte', 

                    'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben', 

                    'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster', 

                    'Item': 'Artikel', 

                    'Items': 'Artikel' 

                }, 

                'pager': { 

                    'currentPageInfo': '{0} von {1} Seiten', 

                    'totalItemsInfo': '({0} Beiträge)', 

                    'firstPageTooltip': 'Zur ersten Seite', 

                    'lastPageTooltip': 'Zur letzten Seite', 

                    'nextPageTooltip': 'Zur nächsten Seite', 

                    'previousPageTooltip': 'Zurück zur letzten Seit', 

                    'nextPagerTooltip': 'Zum nächsten Pager', 

                    'previousPagerTooltip': 'Zum vorherigen Pager' 

                } 

            } 

        }); 

</script> 

Please let us know if you have any further assistance on this. 

Regards, 

Pavithra S.