I'm searching for the possibility to change date format of kendo ui scheduler components' navigation bar. In the basic exmaple (click here) you can see the selected time range right next to "Today" button. I don't have so much space left in my website and therefore want to change date format to eg. "18.08.2014 - 24.08.2014".
Unfortunately I don't see any option to configure this in the official api reference...
Did I just overlook something or is it not possible to change settings for that?
Thanks for your help.
Philip
I ran into the same problem, I noticed with Chrome dev tools there is a span with class="k-lg-date-format" wich displays the date as you see it now, and a span with class="k-sm-date-format" that could display the date with the shorter MM/dd/yyyy format, but his display property is set to none. I created another stylesheet to change the display property of the first to none and the second to inline. Had to use !importan because it was overloaded by kendo stylesheet.
.k-sm-date-format {
display: inline !important;
}
.k-lg-date-format {
display: none !important;
}
It's configurable:
views: [
{
type: CustomAgenda,
title: "List",
selected: true,
selectedDateFormat: "{0:dddd dd MMMM yyyy} - {1:dddd dd MMMM yyyy}",
selectedShortDateFormat: "{0:dd/MM/yyyy} - {1:dd/MM/yyyy}"
}, {
type: "day",
selectedDateFormat: "{0:dddd dd MMMM yyyy}",
selectedShortDateFormat: "{0:dd/MM/yyyy}"
}, {
type: "month",
selectedDateFormat: "{0:MMMM yyyy}",
selectedShortDateFormat: "{0:MMMM yyyy}"
}
]
The short format is for crossing the low width responsive break point.
https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.selecteddateformat
Related
This is a working example you can take
<input type="text" id="ddl" />
<button>Change value</button>
<script>
var ddl = $("#ddl").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
filter: "contains",
dataSource: {
data: [
{id: 1, name: "apples"},
{id: 2, name: "oranges"},
{id: 3, name: "apples2"},
{id: 4, name: "oranges2"}]
}
}).data("kendoDropDownList");
$("button").on("click", function(){
ddl.dataSource.filter("")
ddl.value(2);
});
</script>
http://dojo.telerik.com/#plazarov/EmAni
Click on the dropdown list and filter it in Edge
Now clear the filter by selecting 'x' mark on the input text field. The filter wont get cleared.
Is it a bug in Kendo control?
You could argue it's a Kendo bug yes, see their example which suffers the same problem (in IE/Edge):
http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering
But you could also argue that it's the browser poking it's nose in and adding this "clear" button to the input field. You can suppress it with simple CSS: (credit to Remove IE10's "clear field" X button on certain inputs?)
.someinput::-ms-clear {
display: none;
}
See working example here: http://dojo.telerik.com/oguYo
Interestingly the Kendo styles suppress this too instead of making it work with the widgets, I found 2 uses of it in the common CSS just at a glance:
.k-widget ::-ms-clear{width:0;height:0}
.k-multiselect-wrap .k-input::-ms-clear{display:none}
Presumably they missed this instance though, good spot!
It seems it's bug. And the previous "answer" is not an answer.
For both examples http://dojo.telerik.com/#plazarov/EmAni and http://dojo.telerik.com/oguYo you need click twice for clearing the filter.
I don't find a solution too.
But it works if you clear a selected value:
http://dojo.telerik.com/ocUlEkAd/2
I need some help with how Kendo Chart tool.
I am trying to plot a line graph with bookings on particular date. I have a booking on a particular day and can see the circular plot. If i hover on it i can see the tool tip which contains the summary of the booking. I want this tooltip to always be visible/open. At the moment it only happens on mouse over.
function createChart() {
$("#chart").kendoChart(data);
var tooltip = $("#chart").kendoTooltip({
width: 120,
position: "top",
visibe: true
}).data("kendoTooltip");
}
I am using Kendo for the first time and am very confused now. Any help will be much appreciated.
You can always show the tooltips or labels without having to hover over them by mouse, by using setting the visible of the series labels to true as follows:
seriesDefaults: {
type: "line",
labels: {
visible: true
}
}
You can check and see a demo example here: http://demos.telerik.com/kendo-ui/line-charts/local-data-binding
$("#ElementId").attr("disabled","disabled");
The Above code only works for the Date pickers which are declared in Html page.
But I want to Disable the kendo Date picker in the kendo Grid Header Filter area.
Here is a simple way of achieving what you want.
Disabled text input on grid filter
I have modified the date cell to have the following:
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
filterable: {
cell: {
template: function (element) {
element.element.kendoDatePicker({
});
element.element.attr('disabled', 'disabled');
}
}
}
}
You will notice that I have added a template to the cell which will override the default date picker and add my own date picker to the filter row.
Note if you want to do this via the menu you just need to do this at the first element item e.g. element.kendoDatePicker({})
Hope this is what you are after.
For more info on this take a look at this link:
kendo grid filter api
i need help about formatting a kendo grid cell.
I need to show the € symbol, in a cell of my kendo grid, but it shows me always the $ symbol.
I included the js file
<script src="../js/cultures/kendo.culture.it-IT.min.js"></script>
then this is the model.filed definition:
price: { type: "number"}
and here is the column.field definition
{
field: "price", title: "Price", width: 100, culture: "it-IT", format: "{0:c}"
}
.... and another question... can I represent that type of data in a field of "string" type???
any suggestion would be appreciated.
Are you calling kendo.culture("it-IT"); on your page before the grid is created ?
Yes, you can specify a template for the price field, and turn it into a string, or you can just specify the type in model.
price: { type: 'string' }
And kendo will convert it.
For Example:In kendo Grid Field like money or salary .Which showed with currency format.
By using below code.
kendo.culture("en-US");
kendo.toString(1.00, "c0");
Which gives $1.00
Do you show € symbol: kendo.culture("de-DE"); use this format
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