Localization of HeaderTexts in ejGrid Control

[Thong Ta]

Hi,

I am currently evaluating the use of Essential Javascript in the context of SharePoint app development. I use the grid control and wondered, if the header texts could be changed according to the locale for the grid, e.g. a column named "Full Name" for "en-US" would be named "Vollständiger Name" for "de-DE". 

I found the localization for the grid and for the pager, but I could not find any information if and how this could be extended in the way I need it. 

Could you give me a hand, how to do this?

Thanks in advance,

Thong

[Madhu Sudhanan P]

Hi Thong,

Thanks for using Syncfusion products.

Query: “if the header texts could be changed according to the locale for the grid, e.g. a column named "Full Name" for "en-US" would be named "Vollständiger Name" for "de-DE"”

The translation of the grid content (Grid datasource and header text) based on particular locale should be done manually.  The headerText of the columns should be provided as follows.

$("#Grid").ejGrid({

                . . . .

                

                locale: "de-DE",

                columns: [

                         { field: "FullName", headerText: "Vollständiger Name” },

. .  . 

                ]

            });

If no headerText is specified for the column, then the field name will be set as the header text.

To localize the grid default string, we have to provide the localization string value by adding a property(property name should be same as locale name) to the object “ej.Grid.locale”.  The default property and values of locale “en-US” will be as follows.

ej.Grid.locale["en-US"] = {

            EmptyRecord: "No records to display",

            //Editing option localization strings

            DeleteOperationAlert: "No records selected for delete operation",

            EditOperationAlert: "No records selected for edit operation",

            SaveButton: "Save",

            OkButton: "OK",

            CancelButton: "Cancel",

            EditFormTitle: "Details of ",

            AddFormTitle: "Add New Record",

            //Key Combination alert message

            Notactionkeyalert: "This Key-Combination is not avaiable",

            Keyconfigalerttext: "This Key-Combination has already been assigned to ",

            //Group drop area and caption format

            GroupDropArea: "Drag a column header here to group its column",

            GroupCaptionFormat: "items",

            //Bulk Editing Alert Messages

            BatchSaveConifrm: "Are you sure you want to save changes?",

            BatchSaveLostChanges: "Unsaved changes will be lost. Are you sure you want to continue?",

            //Pager bar message string

            PagerInfo: "{0} of {1} pages ({2} items)",

            //Frozen Alert Messages

            FrozenColumnsViewAlert: "Frozen columns should be in grid view area",

            FrozenColumnsScrollAlert: "Enable allowScrolling while using frozen Columns",

            FrozenNotSupportedException: "Frozen Columns and Rows are not supported for Grouping, Row Template, Detail Template and Batch Editing",

            //Toolbar tooltip

            Add: "Add",

            Edit: "Edit",

            Delete: "Delete",

            Update: "Update",

            Cancel: "Cancel",

            //Filter menu strings

            StringMenuOptions: [{ text: "StartsWith", value: "StartsWith" }, { text: "EndsWith", value: "EndsWith" }, { text: "Contains", value: "Contains" }, { text: "Equal", value: "Equal" }, { text: "NotEqual", value: "NotEqual" }],

            NumberMenuOptions: [{ text: "LessThan", value: "LessThan" }, { text: "GreaterThan", value: "GreaterThan" }, { text: "LessThanOrEqual", value: "LessThanOrEqual" }, { text: "GreaterThanOrEqual", value: "GreaterThanOrEqual" }, { text: "Equal", value: "Equal" }, { text: "NotEqual", value: "NotEqual" }],

            PredicateAnd: "AND",

            PredicateOr: "OR",

            Filter: "Filter",

            MatchCase: "Match Case",

            Clear: "Clear"

            PrintGrid: "Print",

            ExcelExport: "Excel Export",

            WordExport: "Word Export",

            PdfExport: "PDF Export", 

            ResponsiveFilter: "Filter",

            ResponsiveSorting: "Sort"

        };

Please refer our online demo for localizing grid.

https://js.syncfusion.com/demos/web/#!/azure/grid/Localization

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P

[Thong Ta]

Hi Madhu,

thanks for the quick reply.

If I understand correctly, the translation of the grid content should be done manually and only the grid default strings can be translated using the "ej.Grid.locale" object. To change the header text of columns dynamically, e.g. based on a user selection, I have to create my own means. Is this correct?

Best regards,

Thong

[Madhu Sudhanan P]

Hi Thong,

Please find the response.

Query: “To change the header text of columns dynamically, e.g. based on a user selection, I have to create my own means. Is this correct?”

In Essential Javascript Grid control, we can only localize the string given in “ej.Grid.locale”, and it is our responsibility to localize other things such as headerText. For your convenience we have created a simple grid sample, in which the column headerText changes dynamically based on locale and the same can be downloaded from the below location.

Sample Location:  https://www.syncfusion.com/downloads/support/directtrac/118018/headerText-locale1713283410.zip

In the above sample, we have list of locale in a dropdownlist and on selecting a locale from the DropDownList, we are updating the header text of columns based on the locale and the columns will be updated using the public method “columns”. Please refer the below code snippet.

$(function () {

            $("#Grid").ejGrid({

                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData,

                . . . . .

                locale: $("#language").val(),

                columns: [

                              { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75 },

                              { field: "CustomerID", headerText: "Customer ID", width: 90 }                             

                ]

            });

            $("#language").ejDropDownList({ width: "120px", "change": "onChange"}).ejDropDownList({ selectedItemIndex: 1 });

        });

     

        function onChange(args) {

            var cols = ["Order ID", "Customer ID"];

            //Here we have header text corresponding to particular locale

            var english = { "Order ID": "Order ID", "Customer ID": "Customer ID" };

            var italian = { "Order ID": "ID ordine", "Customer ID": "ID cliente" };

            var germany = { "Order ID": "Bestell-ID", "Customer ID": "Kunden-ID" };

            var grid = $("#Grid").ejGrid("instance"), columns = grid.model.columns;

            //Selecting the headertext based on locale

            var locale = args.value == "en-US" ? english : args.value == "es-ES" ? italian : germany; 

            //Updating the headerText

            for (var i = 0; i < cols.length; i++) {

                columns[i].headerText = locale[cols[i]];

            }

            //Update columns  using columns method

            grid.columns(columns);

            $("#Grid").ejGrid("model.locale", args.value);

        }

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P

[Thong Ta]

Hi Madhu,

thanks for the sample and the explanation. Helped a lot.

Best regards,

Thong

[Madhu Sudhanan P]

Hi Thong,

Thanks for your update. Please get back to us if you require further assistance, we will be happy to help you out.

Regards,

Madhu Sudhanan. P

[Thong Ta]

Hi Madhu,

Thanks to your help I could change many of the texts dynamically. But one text I have difficulties with is the title of a modal dialog.

I can set the title with "$(titleID).attr("title", "New Title");" and this title is displayed. But when I change it using the same method, the title of the modal dialog stays the same.

Is there any other way I can change the title of a modal dialog dynamically?

Thanks in advance and best regards,

Thong

[Madhu Sudhanan P]

Hi Thong,

Query : “Is there any other way I can change the title of a modal dialog dynamically?”

Are you referring the title of modal dialog that appears while grid editing, if so we can change that dialog`s title using the following properties of the “ej.Grid.locale[“localeName”]”. Please refer the below code snippets.

ej.Grid.locale["en-US"] = {

        . . . .

        //Used while editing

        EditFormTitle: "Details of ",

       

        //Used while adding records

        AddFormTitle: "Add New Record",

        . .. . .

    };

The above properties will change the title of Dialog box that appears during editing and adding as per locale value and the Dialog will look like below,

If we misunderstood your requirement, could please clarify us which modal dialog you are referring in your requirement.

Regards,

Madhu Sudhanan. P

[Thong Ta]

Hi Madhu,

yes, sorry for the misunderstanding. Some details:

I created a div named 'addReisekostenDialog':

<div id='addReisekostenDialog'>

[...]

</div>

and I used this to open a new ejDialog:

$("addReisekostenDialog").ejDialog(

{

    showOnInit: visible,

    allowDraggable: true,

    enableModal: true,

    enableResize: true,

    width: 900

});

Somewhere else I use this to set the title, and this is working fine:

$("addReisekostenDialog").attr("title","new travel expense");

But when I change the the title after that using the same method, the title stays at "new travel expense".

So, do you know a way to change the title of a custom modal ejDialog?

Thanks and best regards,

Thong

[Harikrishnan P]

Hi Thong,

Query: do you know a way to change the title of a custom modal ejDialog?

We have a property called “title” to set the title for the Dialog. There is no need to use JQuery “attr” function to set the title for the dialog. To set the title during initialization, please refer the below code

[Script]

            $("#lognForm").ejDialog(

                {

                    enableModal: true,

                    enableResize: false,

                    width: 300,

                    //Title is specified here

                    title:"mytitle",

                    position: { X: 363, Y: 110 },

                    close: "onDialogClose"

                });

We can change the “title” of the dialog dynamically using set model option. To change the value dynamically create object for the dialog control and using “option” we can get or set the values dynamically. Please refer the below code.

[Script]

        function changetitle() {

            //Object for dialog is created

            obj = $("#lognForm").data("ejDialog");

            //title is changed dynamically

            obj.option("title", "Title is changed now");        }

Also, for your convenience we have attached a sample in the following location to showcase your requirement.

Sample Location: http://www.syncfusion.com/downloads/support/directtrac/118018/Dialog_title_Change-416199962.zip

Please get back to us if you would require any further assistance.

Regards,

HariKrishnan