Modifying language in Kendo UI

I am currently using Kendo UI to develop grids and applying the data-filterable option for data filtration. My requirement is to switch the language from English to Polish. How can I achieve this?

https://i.sstatic.net/J5PEa.png

Below is the script I am working with. I aim to translate "Is equal to" to its Polish equivalent.

  var viewModel;
        viewModel = kendo.observable({
            isVisible: true,
            products: new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            login: {type: "string"},
                            naz_druk: {type: "string"},
                            naz_wys: {type: "string"},
                            zabl: {type: "string"},
                            arch: {type: "string"},
                            ost_log: {type: "date"},
                            il_log: {type: "number"},
                            gen_zap: {type: "number"},
                            il_zap: {type: "number"}
                        }
                    }
                },
                    batch: true,
                    data: [{
                        "login": "AGCDE",
                        "naz_druk": "Jan Kowalski",
                        "naz_wys": "Jan Kowalski",
                        "zabl": "TAK",
                        "arch": "NIE",
                        "ost_log": "12/12/2016",
                        "il_log": "5",
                        "gen_zap": "5",
                        "il_zap": "5"
                    },
                        {
                            "login": "bbbGCDE",
                            "naz_druk": "Jan Nowak",
                            "naz_wys": "Jan Nowak",
                            "zabl": "NIE",
                            "arch": "NIE",
                            "ost_log": "12/06/2016",
                            "il_log": "2",
                            "gen_zap": "2",
                            "il_zap": "2"
                        }]
                })
        });
        kendo.bind($("#oknoGlowne"), viewModel);

meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
        <!--<link rel="stylesheet" type="text/css" href="format_cs.css">-->

        <base href="http://demos.telerik.com/kendo-ui/grid/mvvm">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.uniform.min.css" />

        <script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>

        <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
        <script src="../content/shared/js/console.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div>
    <!-- Container glówne okno-->
    <div id="oknoGlowne"
         data-role="window"
         data-title="Lista użytkowników"
         data-bind="visible: isVisible"
         data-width="800"
         data-height="400"
         style="padding:0; border: none;"
         data-actions="[
                 'Pin',
                 'Minimize',
                 'Maximize',
                 'Close',
                 ]"
    >

        <div data-role="splitter"
             data-orientation="vertical"
             data-panes="[{
             collapsible: false,
             resizable: false,
             size: '30px'
             },{
             collapsible: false,
             resizable: true
             }]"
             style="height: 100%; border: none;">
            <!-- Główny div-->
            <div>
                <!-- Menu główne-->
                <div class="menuGlowne"
                     data-role="menu"
                     data-resizable="true"
                     data-bind="events: { select: onMenuSelect }"
                     style="width: 100%; border: none;background-color: lightgray; ">
                    <li><input class="search"
                               style="width:150px;"
                               data-spinners="false"
                               placeholder="Rola"></li>
                    <li><input class="search"
                               style="width:150px;"
                               data-spinners="false"
                               placeholder="Loginid"></li>
                    <li data-menu-id="dodajUzytkownika"
                        data-title="Dodaj użytkownika"
                        data-role="tooltip"
                        data-auto-hide="true"
                        data-position="top">
                        <span class="fa fa-plus"></span></li>
                    <li data-menu-id="edycjauzytkownika"
                        data-title="Edytuj/uzupełnij dane użytkownika"
                        data-role="tooltip"
                        data-auto-hide="true"
                        data-position="top">
                        <span class="fa fa-pencil-square-o"></span></li>
                </div>
                <div>
                    <div data-role="grid"
                         data-editable="false"
                         data-sortable="true"
                         data-pageable='{
                             "previousNext": true,
                             "numeric": true,
                             "pageSizes": true,
                             "info": true
                             }'

                         data-resizable="true"
                         data-columns="[
                             { 'field': 'login', 'width': 50, 'title' : 'Login'},
                             { 'field': 'naz_druk','width': 50, 'title' : 'Nazwa drukowana' },
                             { 'field': 'naz_wys','width': 50, 'title' : 'Nazwa wyświetlana' },
                             { 'field': 'zabl','width': 20, 'title' : 'Zablokowany' },
                             { 'field': 'arch','width': 20, 'title' : 'Zarchiwizowany' },
                             { 'field': 'ost_log','width': 50, 'title' : 'Ostatnie logowanie','format': '{0:MM/dd/yyyy}' },
                             { 'field': 'il_log','width': 20, 'title' : 'Ilość logowań' },
                             { 'field': 'gen_zap','width': 20, 'title' : 'Wygenerowane zapytania' },
                             { 'field': 'il_zap', 'width': 20,'title' : 'Ilość zapytań' },
                             ]"
                         data-bind="source: products,
                            visible: isVisible,
                            events: {
                            save: onSave
                            }"

                         data-filterable="[
                         { field: 'login', operator: 'startswith' },
                         { field: 'naz_druk', operator: 'startswith' },
                         { field: 'naz_wys', operator: 'startswith' },
                         { field: 'zabl', operator: 'startswith' },
                         { field: 'arch', operator: 'startswith' },
                         { field: 'ost_log', operator: 'startswith' },
                         { field: 'il_log', operator: 'startswith' },
                         { field: 'gen_zap', operator: 'startswith' },
                         { field: 'il_zap', extra: 'false', operator: 'number' },

                         ]"

                         style="height: 100%; border: none;">
                    </div>
                </div>
            </div>
        </div>
    </div>
javascriptfunctionkendo-ui

Answer №2

To switch the language to English in kendo, you can use the command kendo.culture("en-US"). However, make sure to include the necessary js file for the desired languages. If you want a mix of English and Polish (English as the main language with Polish elements in the menu), you will need to manually specify the messages. This can be done by directly overriding the messages as shown below:

kendo.ui.FilterCell.prototype.options.operators.string.eq = "Some Value"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing image data using JavaScript

I am in the process of creating a 360-degree viewer that utilizes raster tiles (leaflet) and requires over 85,000 images for each view. In order to enhance the viewer's performance, I am attempting to cache all of these images. However, I keep receivi ...

javascriptjquerycachingleaflet

What is the best way to incorporate padding into an Angular mat tooltip?

I've been attempting to enhance the appearance of the tooltip dialog window by adding padding. While adjusting the width and background color was successful, I'm encountering difficulties when it comes to styling the padding: https://i.sstatic.ne ...

javascripthtmlcssangularangular-material

How to sort data in AngularJS by clicking on a column to change the order from ascending to

The code view below is what I am currently working with: <tr ng-repeat="c in clients | orderBy:'code'"> <td>{{c.firstname}} {{c.lastname}}</td> <td>{{c.telephone}}</td> <td>{{c.location}}</td> ...

javascriptangularjssorting

Exploring secure routes in Node.js with test cases using Mocha and Chai?

The function verifies whether the route is accessible or not function checkSessionCookieValidity(req, res, next) { if (!isValid(req.session)) { return res.status(401).json({ isLoggedIn: false }); } return next ...

javascriptnode.jsexpressmocha.jschai

Tips for setting up nested folders using Node.js on a Windows machine:

Is there a way to use Nodejs in Windows 10/11 to create a parent folder and then add a new folder inside of that parent folder, like this: parent/child within the Documents folder? ...

javascriptnode.jstypescript

Having trouble uploading an image with Angular's HttpClient

Uploading an image using native fetch POST method works perfectly: let formData = new FormData(); formData.append('file', event.target.files[0]); console.log(event.target.files[0]); fetch('http://localhost:8080/file/ ...

javascriptangularhttp

Angular 4 Operator for adding elements to the front of an array and returning the updated array

I am searching for a solution in TypeScript that adds an element to the beginning of an array and returns the updated array. I am working with Angular and Redux, trying to write a reducer function that requires this specific functionality. Using unshift ...

javascriptarraysangulartypescript

What are the steps to utilize the feature of "nprogress"?

After successfully installing npm install nprogress in my project, I encountered an issue when trying to refresh the page - the console displayed the following message: hot-dev-client.js:182 [Fast Refresh] done hot-dev-client.js:196 [Fast Refresh] rebuildi ...

javascriptreactjsnext.js

Count up with style using the "jQuery Boilerplate" plugin for Jquery!

I am a beginner in creating jQuery plugins. The following jQuery plugin has been created using jQuery Boilerplate. It performs a count-up and notifies when the count-up is completed. I would like to have a function that restarts the count-up by setting t ...

javascriptjqueryjquery-plugins

Array logging mistakenly outputs a number

I needed to access the data from JSON outside of the xml function so that I could use it in multiple functions. When I initially logged the data, it displayed arrays with objects in it. However, when I checked the length instead, it returned zero. After re ...

javascriptarraysjsonxmlpromise

How can I display a pre-existing div with a dropdown button?

I have individual div elements for each type of clothing item (shirt, pant, suit) that I want to display when the corresponding service is selected. This means that when I click on one of them, only that specific div will be shown. I am looking for a solut ...

javascriptjqueryhtmlcss

The req.ip in Express appears to alternate between displaying my local machine address as ::ffff:127.0.0.1 and ::1 in an unpredictable manner

Simply put, the title sums it up. I've spent the last few hours working on a middleware function that uses cookies for authentication, like so: const authRoute = async (req, res, next) => { console.log(req.ip); // additional logic here ...

javascriptnode.jsexpress

Console warning in Next.js: "The 'style' property did not match."

Currently working on a website with Next.js, I've encountered a red color warning in the console related to the Image component from 'next/Image'. Unsure of the reason for this warning, I'm seeking to resolve it to ensure the project&ap ...

javascriptreactjsnext.js

Documentation guide: best practices for indicating optional return values

I am tasked with properly documenting a function using JSDoc. The function triggers something if it returns true, otherwise it does not. However, the return value must always be of boolean type. Here is my proposed JSDoc documentation: * @return {boolean ...

javascriptdocumentationjsdoc

Creating an endless ticker animation in AngularJS that dynamically adjusts to element dimensions

This is my initial foray into AngularJS, where I am creating a ticker display comprised of boxes. Check out the CodePen here The Code: index.jade: doctype html html(ng-app="ticker") head script(src="../bower_components/angular/angular.js" ...

javascriptangularjscss

Passing inline CSS styles from parent component to child component in Vue

I am currently using vue.js with vuetify, and I need to position a button on top of a canvas component (managed by the Konva library). I successfully achieved this by using absolute positioning for the button. However, in order to organize my code better, ...

javascriptvue.jsvuetify.js

Searching for TypeScript type definitions for the @Angular libraries within Angular 2

After updating my application to Angular2 v2.0.0-rc.1, I am encountering TypeScript compile errors and warnings when webpack bundles my application. These messages appear for any @angular packages referenced in my TypeScript source files: ERROR in ./src/a ...

javascriptangularjstypescriptangularwebpack

Issues with Jquery Checkboxes Functionality

Hi everyone, yesterday I had a question and since then I have made quite a few changes to my code. Right now, I am attempting to make some JavaScript work when a specific checkbox is checked. However, nothing is happening when I check the checkbox. Can any ...

javascriptjqueryif-statementcheckbox

I'm interested in learning the best way to insert the images from this JSON file into the corresponding div elements

I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...

javascriptjqueryhtmlcssjson

The process of altering a grid in HTML and adding color to a single square

I am facing a challenge that I can't seem to overcome. I need to create a game using HTML, CSS, and JS. The concept involves a grid where upon entering a number into a text box, a picture of a cartoon character is displayed in a square which turns gre ...

javascripthtmlcsscss-grid