You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs-aspnet/globalization/localization.md
+24-28Lines changed: 24 additions & 28 deletions
Original file line number
Diff line number
Diff line change
@@ -13,6 +13,30 @@ position: 3
13
13
14
14
You can change the messages that are displayed in the {{ site.product }} helpers by including an additional script file in the document.
15
15
16
+
## Localization Files
17
+
18
+
Officially, the {{ site.product }} components support only the English language. The community contributes to translating the messages to other languages by adding new `messages` JavaScript files and updating the existing ones in the [Kendo UI Core repository](https://github.com/telerik/kendo-ui-core/tree/master/src/messages).
19
+
20
+
To display messages in different languages, {{ site.product }} uses localization (resource) files, for example, `Messages.es-ES.resx`. The localization files are generated from the `messages` JavaScript files.
21
+
22
+
You can find the resource files in the Telerik UI source zip bundle:
23
+
24
+
{% if site.core %}
25
+
1. Log in to your [Telerik account](https://www.telerik.com/login/v2/telerik).
26
+
27
+
1. Go to the [Telerik UI for ASP.NET Core download page](https://www.telerik.com/account/downloads/product-download?product=UIASPCORE) and download the `telerik.ui.for.aspnet.core.{{ site.mvcCoreVersion }}.commercial-source.zip` file.
28
+
29
+
1. Extract the archive and navigate to the `\src\AspNet.Core\Kendo.Mvc\Resources\` folder that contains the resource files.
30
+
{% else %}
31
+
1. Log in to your [Telerik account](https://www.telerik.com/login/v2/telerik).
32
+
33
+
1. Go to the [Telerik UI for ASP.NET MVC download page](https://www.telerik.com/account/downloads/product-download?product=KENDOUIMVC) and download the `telerik.ui.for.aspnetmvc.{{ site.mvcCoreVersion }}.commercial-source.zip` file.
34
+
35
+
1. Extract the archive and navigate to the `\src\Kendo.Mvc\Kendo.Mvc\Resources\` folder that contains the resource files.
36
+
{% endif %}
37
+
38
+
> Changes made to the `messages` files through community contribution will be reflected in the {{ site.product }} release that follows that contribution. Refer to the [section on contributing](#contribution).
39
+
16
40
## Setting the Current Language
17
41
18
42
{% if site.core %}
@@ -59,34 +83,6 @@ The following example demonstrates how to create a new localization file. The `k
59
83
{% else %}
60
84
The culture that is used for the localization messages in Telerik UI for ASP.NET MVC is determined by the `CurrentUICulture`, not by the `CurrentCulture` property. By default, if `CurrentUICulture` is not supported, the Telerik UI for ASP.NET MVC helpers will display their messages in American English (en-US). If `CurrentUICulture` is set from code or from the `web.config` file, Telerik UI for ASP.NET MVC will use localized user interface messages.
61
85
62
-
The following table lists the localized messages for the cultures which are supported by Telerik UI for ASP.NET MVC.
63
-
64
-
| Culture | Language | Country
65
-
|:--- |:--- |:---
66
-
|`ar-AE` |Arabic |U.A.E.
67
-
|`bg-BG` |Bulgarian |Bulgaria
68
-
|`cs-CZ` |Czech |Czech Republic
69
-
|`da-DK` |Danish |Denmark
70
-
|`de-DE` |German |Germany
71
-
|`el-GR` |Greek |Greece
72
-
|`en-US` |English |United States of America
73
-
|`es-ES` |Spanish |Spain
74
-
|`fr-CA` |French |Canada
75
-
|`fr-FR` |French |France
76
-
|`he-IL` |Hebrew |Israel
77
-
|`it-IT` |Italian |Italy
78
-
|`nl-NL` |Dutch |The Netherlands
79
-
|`pl-PL` |Polish |Poland
80
-
|`pt-BR` |Portuguese |Brazil
81
-
|`pt-PT` |Portuguese |Portugal
82
-
|`ro-RO` |Romanian |Romania
83
-
|`ru-RU` |Russian |Russia
84
-
|`sk-SK` |Slovak |Slovakia
85
-
|`sv-SE` |Swedish |Sweden
86
-
|`tr-TR` |Turkish |Turkish
87
-
|`uk-UA` |Ukrainian |Ukraine
88
-
|`zh-CN` |Chinese |People's Republic of China
89
-
90
86
## Customizing the Localized Messages
91
87
92
88
Telerik UI for ASP.NET MVC uses [satellite assemblies](https://docs.microsoft.com/en-us/dotnet/framework/resources/creating-satellite-assemblies-for-desktop-apps) to support localization (user interface messages localized for a set of cultures). To change the provided localization messages, you have to build a custom `Kendo.Mvc.dll` version because `Kendo.Mvc.dll` is a strongly named assembly and its private key is not shipped as part of the distribution.
*`https://kendo.cdn.telerik.com/[VERSION]/styles/[FILENAME]`—The `styles` folder contains the [minified `.css` files](#adding-the-required-css-files).
30
+
*`https://kendo.cdn.telerik.com/[VERSION]/mjs/[FILENAME]`—The `mjs` folder contains the [JavaScript modules](#using-javascript-modules).
31
+
*`https://kendo.cdn.telerik.com/[VERSION]/js/[FILENAME]`—The `js` folder contains the [bundled Kendo UI JavaScript files](#using-bundled-javascript).
31
32
32
-
In the URL above, you must replace `VERSION` and `FILENAME` with the client-side resource that you need and its version. For example, to load version `{{ site.mvcCoreVersion }}` of the minified Kendo UI scripts and the related CSS files, use these URLs:
33
+
In the sample URLs above, you must replace `[VERSION]` and `[FILENAME]` with the client-side resource that you need and its version. For example, to load version `{{ site.mvcCoreVersion }}` of the Kendo JavaScript modules and the CSS files for the Kendo Default visual theme, use these URLs:
If you prefer the HTTP protocol, replace `https` with `http` in the URLs above.
38
+
## Adding the Required CSS Files
39
+
40
+
Adding the Kendo CSS files allows you to use the [Kendo UI visual themes]({% slug sassbasedthemes_overview %}). The minified versions of the `.css` files are available in the `styles` folder of the Kendo CDN URL—`https://kendo.cdn.telerik.com/[VERSION]/styles/[FILENAME]`.
41
+
42
+
To load version `{{site.cdnVersion}}` of the desired visual theme, replace `[VERSION]` and `[FILENAME]` with their actual values, for example, `https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/styles/kendo.default-main.min.css`.
43
+
44
+
## Adding the Required JavaScript Files
45
+
46
+
To import the JavaScript files required for the Telerik UI components, apply either of the following approaches:
47
+
48
+
*[Using the JavaScript modules](#javascript-modules)—[A new approach introduced with version `2022.3.1109`]({% slug core_ecmascript_overview %}).
49
+
*[Using the bundled JavaScript](#bundled-javascript)—The traditional way of including the Kendo UI scripts.
50
+
51
+
### Using JavaScript Modules
52
+
53
+
The [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) are located in the `mjs` folder of the Kendo CDN URL—`https://kendo.cdn.telerik.com/[VERSION]/mjs/[FILENAME]`.
54
+
55
+
To include a Kendo JavaScript module in your project:
56
+
57
+
1. Use the `script` tag with the `type=module` attribute.
58
+
1. Add a reference to the global `aspnetmvc.min.js` file.
59
+
60
+
The two examples below demonstrate how to include individual component modules and all available component modules:
61
+
62
+
* Including individual component modules.
63
+
64
+
```html
65
+
<scriptsrc="https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/mjs/kendo.grid.js"type="module"></script> <!-- Include the Grid module. The rest of the dependencies required by the Grid will be loaded automatically. -->
66
+
<scriptsrc="https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/mjs/aspnetmvc.min.js"type="module"></script> <!-- Include the global `aspnetmvc.min.js` file. -->
67
+
```
68
+
69
+
* Including all available modules.
70
+
71
+
```html
72
+
<scriptsrc="https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/mjs/kendo.all.js"type="module"></script> <!-- Include all Kendo UI modules. -->
73
+
<scriptsrc="https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/mjs/aspnetmvc.min.js"type="module"></script> <!-- Include the global `aspnetmvc.min.js` file. -->
74
+
```
75
+
76
+
### Using Bundled JavaScript
77
+
78
+
The Kendo UI JavaScript files for the traditional format are located in the `js` folder of the Kendo CDN URL—`https://kendo.cdn.telerik.com/[VERSION]/js/[FILENAME]`.
79
+
80
+
To load version `{{site.cdnVersion}}` of the bundled Kendo JavaScript files, replace `[VERSION]` and `[FILENAME]` with their actual values, for example, `https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.all.min.js`.
38
81
39
82
## Using the CDN in Your Project
40
83
41
-
> Replace the Kendo UI version from the following code snippets with the version of the product you are using—for example, `{{ site.mvcCoreVersion }}`.
84
+
The following complete example demonstrates how to add the [CSS files](#adding-the-required-css-files) and the [bundled JavaScript](#using-bundled-javascript).
85
+
86
+
>Replace the Kendo UI version from the following code snippets with the version of the product you are using—for example, `{{ site.mvcCoreVersion }}`.
42
87
43
88
{% if site.core %}
44
89
1. Open the layout of the application. By default, it is `~\Views\Shared\_Layout.cshtml`.
@@ -88,8 +133,7 @@ The following articles provide solutions to common issues related to the Telerik
88
133
## Next Steps
89
134
90
135
* [Explore the helper script dependencies]({% slug script_filesfor_barcodes_widgets %})
91
-
* [Check out the PDF and Excel export support]({% slug exportsupport_core %})
description: "Get started with {{ site.product }} and learn about the ECMAScript modules provided in the library."
5
+
slug: core_ecmascript_overview
6
+
position: 6
7
+
---
8
+
9
+
# ECMAScript Modules
10
+
11
+
As of the 2022.3.1109 version, the Kendo UI code-base is available in the form of ECMAScript modules. As the Telerik UI helpers are wrappers over the [Kendo UI widgets](https://docs.telerik.com/kendo-ui/intro/first-steps), this allows you to use another method to add the client-side resources to your application.
12
+
13
+
## ECMAScript Modules vs. Bundled Scripts
14
+
15
+
The new ECMAScript modules provide the following benefits as compared to the bundled scripts which have been used up to this point:
16
+
17
+
*[Loading single instead of multiple script files](#loading-single-script-files)
ECMAScript enables you to include a single script file to load a particular component. Taking the scripts for the Grid component as an example, previously, if you wanted to include just the Grid on the page instead of all available components, you had to also include every single script dependency related to it and in a specific order.
25
+
26
+
The `<head>` element of your page would've looked similar to the following code snippet:
<!-- And about 80 more individual scripts for every single functionality of the Grid to work properly. -->
35
+
```
36
+
37
+
With the introduction of the ECMAScript modules, you can include just a single script file, as shown in the following example. As a result, ECMAScript will automatically load all of the required dependencies without needing any additional actions on your side, which will greatly increase productivity and decrease the chances of missing any of the script files.
Aside from using the `script` tag, you can also use the [`import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) call to load a module asynchronously into a potentially non-module environment.
47
+
48
+
The suggested approach is useful when, for example, you have a Grid inside a Window. The Grid component is not initialized nor needed before the Window is opened. Therefore, you don't need to import the module when the page first loads. Instead, you can load the module when the Window is opened and only then initialize the Grid component.
49
+
50
+
```javascript
51
+
(async () => {
52
+
let shouldGridModuleBeLoaded =true;
53
+
54
+
// Load the Grid module only if a condition is met.
55
+
if (shouldGridModuleBeLoaded) {
56
+
awaitimport("/dist/mjs/kendo.grid.js");
57
+
}
58
+
})();
59
+
```
60
+
61
+
### Optimized Debugging
62
+
63
+
Another benefit of using ECMAScript is that it enables you to debug the Kendo UI for jQuery source code much easier. When you navigate to the **Devtools** > **Sources** browser tab, you will be able to see the non-minified version of the source code exactly like it is in the development environment of the product.
64
+
65
+
Additionally, the [sourcemap](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html) files are now downloaded only when the **Devtools** is opened.
66
+
67
+
The following image showcases the directory structure of the loaded scripts in the **Devtools** browser:
[ECMAScript is supported by the majority of modern browsers](https://caniuse.com/?search=es6%20modules). If a project requires older browser support, you can choose to use either of the other two available module systems—CommonJS or UMD.
74
+
75
+
## Getting the ECMAScript Files
76
+
77
+
You can obtain the ECMAScript modules in any of the following ways:
Copy file name to clipboardExpand all lines: docs-aspnet/installation/adding-client-side-resources/scripts/what-you-need.md
+11-1Lines changed: 11 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,17 @@ position: 1
9
9
10
10
# Creating Your Own Custom Bundles
11
11
12
-
Depending on your project, you may need to skip some of the Kendo UI utilities and install only what your application requires.
12
+
Depending on your project, you may need to skip some of the Kendo UI utilities and install only what your application requires.
13
+
14
+
To facilitate the customization of your project, Kendo UI for jQuery delivers a set of combined and individual scripts, and also provides further options for scripts customization.
15
+
16
+
* The [combined scripts bundles](#combined-scripts) contain the scripts of specific types of widgets (for example, desktop, hybrid) available for the different Kendo UI distributions.
17
+
18
+
* The [individual scripts bundles](#individual-scripts) contain the scripts of widgets grouped by their common functionality (for example, Charts, Editors) so that you can select which individual control to add to your project.
19
+
20
+
* Customizing your project by [creating your custom scripts](#custom-scripts) allows you to add the specific widgets and features required by your project.
21
+
22
+
*[Using ECMAScript]({% slug core_ecmascript_overview %}) allows you to import individual modules in your application. The related dependencies will be automatically bundled alongside their respective modules. This will save you the trouble of having to manually select which scripts to include in your project.
0 commit comments