Ignite UI

Version

Customizing the Localization of Ignite UI Controls

Topic Overview

Purpose

This topic explains how to localize the Ignite UI™ controls in your language of choice.

Required Background

The following table lists the topics required as a prerequisite to understanding this topic.

Using JavaScript Resources in Ignite UI : This topic describes Ignite UI folder structure, how to use Infragistics loader and how to manually reference controls.

In this topic

This topic contains the following sections:

Introduction

Introduction to localizing Ignite UI controls

Currently we ship jQuery controls in the following languages:

  • English
  • Japanese
  • Russian
  • Bulgarian
  • German
  • French
  • Spanish

This means that in order to get localized version of controls for one of these languages you need to set locale property of Infragistics loader or include the localization file infragistics-<locale>.js where <locale> is one of the following: en, ja, ru, bg, de, fr, es.

Note: Infragistics loader cannot be used to load custom localization files.

Note: We have two redistributable packages, one is for English and one is for Japanese. In English, redistributable package infragistics-en.js is not available. Its localization strings are contained inside the controls code at the beginning of the file. In Japanese, redistributable package infragistics-ja.js is not available. Its localization strings are contained inside the controls code at the beginning of the file.

If you want to set another language you need to follow a different procedure:

  • Localize the control

    • Locate localization files. You can find localization files in <IgniteUI_Install_Folder>\js\modules\i18n, where points by default to C:\Program Files (x86)\Infragistics\2016.2\Ignite UI
  • To localize control which you want to use make a copy of *-ru.js file for the control you want to localize and rename it to *-<language>.js where is two character code of your language.

  • Include the localized file in your project. Include the file you just created into your project. This way, the control will use the strings from your file. This approach will work with Infragistics loader no matter what you’ve set for the locale property.

Note: This guide assumes that you have installed English redistributable package. In this case you will not have infragistics-en.js. That’s why we will use infragistics-ru.js. If you feel uncomfortable with that you can get the Japanese redistributable and get the infragistics-en.js file from there.

Control Localization Files Reference

Introduction

This section describes the available localization files for Ignite UI controls. You can find these files under the \js\modules\i18n folder, where points to the directory where you installed the Ignite UI product.

Control localization reference summary

The following table summarizes localization files for Ignite UI controls.

Control Script Name
igChart infragistics.dvcommonwidget-ru.js
igCombo infragistics.ui.combo-ru.js
igDataSource infragistics.dataSource-ru.js
igDialog infragistics.ui.dialog-ru.js
igEditors infragistics.ui.editors-ru.js

Note: The igDatePicker depends on the jQuery UI Datepicker control, that's why it also requires jquery.ui.datepicker-*.js localization file which can be found in the jQuery UI redistributable package on their web site.

Control Script Name
igGrid infragistics.ui.grid-ru.js
igHtmlEditor infragistics.ui.tree-ru.js
igUpload infragistics.ui.upload-ru.js
igValidator infragistics.ui.validator-ru.js
igVideoPlayer infragistics.ui.videoplayer-ru.js

Walkthrough: Localizing igGridPaging

Introduction

This procedure will guide you to the process of localizing igGridPaging. For the demonstration purposes we will use Spanish localization.

Preview

The following screenshot is a preview of the final result.

Requirements

To complete the procedure, you need an installation of Ignite UI 16.2 (English redistributable).

Note: We assume that the installation path is C:\Program Files (x86)\Infragistics\2016.2\Ignite UI

Overview

This topic takes you step-by-step toward localizing igGridPaging. The following is a conceptual overview of the process:

​1. Making a copy of infragistics.ui.grid-ru.js and renaming it to infragistics.ui.grid-es.js

​2. Localizing infragistics.ui.grid-es.js

​3. Including localized file along with the script references in your project

Steps

The following steps demonstrate how to localize x control.

  1. Making a copy of infragistics.ui.grid-ru.js and renaming it to infragistics.ui.grid-es.js

    Copy C:\Program Files (x86)\Infragistics\2016.2\Ignite UI\js\modules\i18n\infragistics.ui.grid-ru.js to C:\Program Files (x86)\Infragistics\2016.2\Ignite UI\js\modules\i18n\infragistics.ui.grid-es.js

    The result is shown in the following screenshot:

  2. Localizing infragistics.ui.grid-es.js

    Open file C:\Program Files (x86)\Infragistics\2016.2\Ignite UI\js\modules\i18n\infragistics.ui.grid-es.js with text editor and translate igGridPaging section strings into your language. In our case this is Spanish.

    Note: infragistics.ui.grid-es.js contains localization strings for all igGrid features, so you do not have to translate the whole file if you do not need to use all igGrid features.

    In JavaScript:

     $.ig.GridPaging = $.ig.GridPaging || {};
               $.extend( $.ig.GridPaging , {
               locale : {
                   pageSizeDropDownLabel: "Muestreme los registros",
                   pageSizeDropDownTrailingLabel: "registros",
                   nextPageLabelText: "siguienta",
                   prevPageLabelText: "anterior",
                   firstPageLabelText: "",
                   lastPageLabelText: "",
                   currentPageDropDownLeadingLabel: "Pg",
                   currentPageDropDownTrailingLabel: "de ${count}",
                   currentPageDropDownTooltip: "Elija índice de página",
                   pageSizeDropDownTooltip: "Elija el número de registros por página",
                   pagerRecordsLabelTooltip: "Rango de registros actual",
                   prevPageTooltip: "Vaya a la página siguiente",
                   nextPageTooltip: "Vaya a la página anterior",
                   firstPageTooltip: "Vaya a la página primera",
                   lastPageTooltip: "Vaya a la página última",
                   pageTooltipFormat: "página ${index}",
                   pagerRecordsLabelTemplate: "${startRecord} - ${endRecord} de ${recordCount} registros"
                   }
               });
    
  3. Including localized file along with the script references in your project

    Create an HTML file to test the result. In the HTML file include the necessary files for igGridPaging as shown in the screenshot below.

    In HTML:

     <script src="../scripts/modernizr.min.js"></script>
     <script src="../scripts/jquery.min.js"></script>
     <script src="../scripts/jquery-ui.min.js"></script>
     <script src="../../js/modules/i18n/infragistics.ui.grid-es.js"></script>
     <script src="../../js/infragistics.loader.js"></script>
    

Related Content

Topics

The following topics provide additional information related to this topic.

Copyright © 1996 - 2017 Infragistics, Inc. All rights reserved.

Email your feedback on this topic|View onGitHub