We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Localization of HeaderTexts in ejGrid Control

Thread ID:

Created:

Updated:

Platform:

Replies:

118018 Jan 21,2015 12:11 PM UTC Feb 2,2015 01:28 PM UTC JavaScript 9
loading
Tags: ejDialog
Thong Ta
Asked On January 21, 2015 12:11 PM UTC

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 [Syncfusion]
Replied On January 22, 2015 12:41 PM UTC

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.

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

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P



Thong Ta
Replied On January 22, 2015 12:56 PM UTC

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 [Syncfusion]
Replied On January 23, 2015 12:47 PM UTC

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:  http://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
Replied On January 26, 2015 09:22 AM UTC

Hi Madhu,

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

Best regards,
Thong

Madhu Sudhanan P [Syncfusion]
Replied On January 27, 2015 04:54 AM UTC

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
Replied On January 29, 2015 01:39 PM UTC

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 [Syncfusion]
Replied On January 30, 2015 09:21 AM UTC

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
Replied On January 30, 2015 09:58 AM UTC

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 [Syncfusion]
Replied On February 2, 2015 01:28 PM UTC

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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;