Kendo UI does not come with localization packs. You can only chose a culture file which will only setup number and date formats, but not the actual texts displayed in the widgets (for example: the pager texts - items per page, next page, etc., the filter menus (Is equal to, etc.), the grid parts (Drag a column here....), etc.)
To localize a widget one must pass, in the individual options of each widget, a bunch of messages to override the messages used by default by Kendo UI. Something like this:
filterable: {
messages: {
info: "Título:", // sets the text on top of the filter menu
filter: "Filtrar", // sets the text for the "Filter" button
clear: "Limpar", // sets the text for the "Clear" button
// when filtering boolean numbers
isTrue: "é verdadeiro", // sets the text for "isTrue" radio button
isFalse: "é falso", // sets the text for "isFalse" radio button
//changes the text of the "And" and "Or" of the filter menu
and: "E",
or: "Ou"
},
operators: {
//filter menu for "string" type columns
string: {
eq: "Igual a",
neq: "Diferente de",
startswith: "Começa com",
contains: "Contém",
endswith: "Termina em"
},
//filter menu for "number" type columns
number: {
eq: "Igual a",
neq: "Diferente de",
gte: "Maior que ou igual a",
gt: "Mair que",
lte: "Menor que ou igual a",
lt: "Menor que"
},
//filter menu for "date" type columns
date: {
eq: "Igual a",
neq: "Diferente de",
gte: "Maior que ou igual a",
gt: "Mair que",
lte: "Menor que ou igual a",
lt: "Menor que"
}
}
},
groupable: {
messages: {
empty: "Arraste colunas aqui para agrupar pelas mesmas"
}
}
Of course you could share this options in a single JavaScript variable, but then you will face an unexpected problem: if you have messages for ALL options of all widgets collected in a single option variable, it will TURN ON all those options for all grids. If you want a grid without grouping you will have to have a separate localized options variable without the groupable or else, even if you don't want, the group will show because the groupable: { messages: { .... } } will make Kendo recognize it as enabled.
It doesn't seem to be any way to localize the controls by including just an extra JavaScript to override those messages as can be seen on Kendo UI forums.
Is there any other way to do that?
(notice that I'll be answering my own question, and I do not suffer from Bipolar Disorder! It is just a way to get the involvement of the community on the kendo-global project!)
The kendo-global project on github makes it easy to localize all localizable texts on all Kendo UI widgets by only including the desired language file like this:
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script src="/js/lang/kendo.pt-BR.js"></script>
It works by overriding the default options on the prototypes of the widgets, so it will work as if those widgets were created natively in the expected language.
Since it doesn't change anything, and don't override any method, you'll still be able to pass customized options with custom messages by using the standard approach if you need a specific message on a individual widget (instead of "10 itens" you may want to show "10 products" in the pager of the grid...)
The project currently has only a few language packs. Translating is very easy and full credits will be given to every and each translator. So contributors are really, really welcome.
The project's page can be found here: https://github.com/loudenvier/kendo-global
I am working with Telerik Controls Q1 2013 SP1.
It looks like you can no longer override the messages for many of the Kendo grid's labels or tooltips. Here is a list of several messages/tooltips that I was not able to override using a kendo-global language file:
ItemsPerPage
First
Previous
Next
Last
I have no good answer to the original question.
It may be worth mentioning that for my purpose the solution was to use the Fluent API
#(Html.Kendo().Grid<Whatever>()
.Name("Grid")
.Pageable(e => e
.Messages(p => p.ItemsPerPage("")
.First("לדף הראשון")
.Previous("לדף הקודם")
.Next("לדף הבא")
.Last("לדף האחרון")
.Refresh("ריענון")
.Display("מציג {0}-{1} מתוך {2} רשומות")
.Page("דף")
.Of("מתוך {0}")))
...
If a more dynamic option is needed I think getting the current localization and initialize the widget would be a good option.
#{
var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
}
#section HeadContent {
<script src="#Url.Content("~/Scripts/cultures/kendo.culture." + culture + ".min.js")"></script>
}
Here is more documentation about
https://demos.telerik.com/aspnet-mvc/grid/globalization?culture=ru-RU&_ga=2.268933617.1296110429.1575874528-1040251397.1575554475
Related
how do i make admin on rest main grid labels in regular case .as my application requires too many columns in the grid and all together it looks very bad and messy .i have created an en.json file and it's taking the value from there that is if the property is channelType and I have given in en.json as "channelType": "Channel ", its showing "CHANNEL" itself in the grid but I want it to be in regular case such as "Channel", what should I do
You can use the style property on the Datagrid component. See the documentation
const styles = {
header: {
textTransform: 'none',
}
}
<Datagrid styles={styles}>
I am using Kendo UI Grid and other Kendo tools for my project.
How can I change some of its settings globally without using any specific id or class?
Eg: Whenever I use grid, pageable message should be "My custom message" across all the site.
I can do that by targeting perticular grid component like below. I am using kendoGrid many places or many times in same page itself. In that case, how can I do the same without repeating the pageable message everytime?
Online Demo { jsFiddle }
$(document).ready(function () {
$("#grid1").kendoGrid({
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
});
});
$(document).ready(function () {
$("#grid2").kendoGrid({
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
});
});
.............
If I have 5 grid items in same page, let say #grid1, #grid2, #grid3, #grid4, #grid5, should I need to add below message to all 5 grid components?
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
Instead, is there a way where I can override the global properties for KendoGrid element without touching the original plugin?
You don't need to add the configuration to each grid. Instead you can take advantage of Kendo's localization features. To change the pager text for all of your grids you should include a "messages" file after you have loaded "kendo.all.min.js". Since this has to do with localization, the "messages" files are culture-specific. If you have not defined a culture for you project Kendo will assume en-US by default.
Here's what you need to do:
Find the original kendo.messages.en-US.min.js file for your version of Kendo. You should be able to find this file in the Kendo installation directory, for example: C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\js\messages
Copy the file to your project
Look for itemsPerPage inside the file and change its value to whatever you want.
Add a reference to the file in your html's <head> section, but make sure it is after kendo.all.min.js
For more information on localizing Kendo take a look at this article: http://docs.telerik.com/kendo-ui/framework/localization/overview
You can also see a working example here: http://demos.telerik.com/kendo-ui/grid/localization
Is it possible to have a filter menu with options such as Yes, No, Other
I have a grid with a column which could have only 3 values Yes, No or Other. The filter should show radio buttons with these values and two button Filter and Clear. Is this possible?
When I try with field type:"boolean", I get 'Yes' and 'No but how do I add the third radio button 'Other'.
Any help would be appreciated.
Thanks
Kendo has an example of how to do just that here:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
Here is an example of how your filter will probably be set up
filterable: {
//hide second filter option
extra: false,
operators: {
string: {
eq: "Is equal to"
}
}
},
filterMenuInit: function(e) {
//when the filter menu opens find the first dropdown and hide it
//as it has the Is equal to filter in it.
e.container.find(".k-dropdown").eq(0).hide();
}
Here is JSbin that shows how to use some of these features:
http://jsbin.com/qehugexo/2/edit
Update
While I could get radio buttons to show up in the filter window, it was a headache to rig it up and very hacky with the default Kendo stuff. I would suggest using the Kendo Dropdown as show in the demo or just manipulating the filter on the Data source of the Grid itself.
It can be done with code like this:
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: "Boston"}], Logic: "and"})
Here is an example of how you could use it.
filterMenuInit: function(e) {
//when filter menu opens toss it cause its lame!
e.container.html("
<input name='radio' type='radio' checked='checked' value='Clear'>Clear</input>
<input name='radio' type='radio' value='London'>London</input>
<input name='radio' type='radio' value='Seattle'>Seattle</input>
");
$("input[type=radio]").click(function(){
if($(this).val() != "Clear") {
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: $(this).val()}], Logic: "and"})
}else {
$(".k-grid").data("kendoGrid").dataSource.filter({})
}
});
}
And an updated JSbin: http://jsbin.com/qehugexo/3/edit
How can I change the size of buttons and text (or style) in Kendo ui grids?
I want to use them for a responsive web page (mobile and desktop).
Change the text size of rows is easy:
columns: [
{
field: "Title",
width: 100,
attributes: {
"class": "myClass",
style: "font-size:20px;"
}
}
]
But I don't know how change the size of the title of columns and buttons
In this section you can see how you can change the messages the Grid uses or the text for the buttons. use ctrl+f and search for 'message' and 'text'.
Customizing the buttons style is not a good idea (imo). However you can just use CSS classes with "stronger" selectors.
I was looking for a solution that
displayed multiple columns of independent data
did not require a click (or focus) to show the list
had a simple interface
supported visible & hidden values (like HTML's <select>)
has color highlighting to show matches
automatically deletes character entries that are not in any of the choices
I wasn't able to find a control that met these requirements, so I created one. Here is an image of the control in use.
The code to create this control is:
$('input#scrolltest').menuoptions({
"Data": { 1:"January",2:"February",3:"March",4:"April",5:"May", 6:"June",7:"July",
8:"August",9:"September",10:"October",11:"November",12:"December" },
"onSelect": function(mo, data) {
console.log(mo, data.newVal, data.type );
},
"InitialValue": { 'val': 'December'},
"Height": 200,
"Sort": []
});
This control is documented here
The above example is part of this demo page