Hi team,
Where can be seen the SVG icons?
Are they the same as web font icons in this page? https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons
Furthermore, what is the SVG equivalent for web font icon .k-i-loading ?
Best regards,
Laurent.
Hi,
Thank you for your answer to my merged rows question previously. Now I have the problem of getting the grid contents to sustain the format if I use Filter, Clear buttons in the Filter pop up or Sort. Example:
After setting the filter say for "Equals" John Smith I get:
Buuuut. I really want:
Is there a way to "bypass" or extend the function where I could use the same implementation to restructure the rows like the above.
javascript - Does Kendo Grid support cell merge or not? - Stack Overflow
I think maybe I could create a listener to catch the Filter/Clear/Sort command and capture the JavaScript array structure and implement a solution similar to the one in Stack Overflow where I loop though the array and merge the cells of the records when the text content is equal? Maybe I am imagining this?
Hi team,
Consider this dojo: https://dojo.telerik.com/uZOruWEY
The tooltip is initialised without the width property. In that case, on first mouse-in the text is not wrapped and seems the right behaviour for me.
On next mouse-in, the text is wrapped!
Best regards,
Laurent.
I have several Multiselect dropdown controls in my web application that have stopped working after users Chrome browser updated to version 115. They work fine on Chrome 114.
When we click on the control the list does not show up.

When we instantiate both DatePickers and DateTimePickers, there appears to be a phantom image (what looks like an "S") overlaying the calendar and clock icons as shown in the example below:
I've played around with the classes that are associated with the spans in which the icons are located, but am unable to locate the source of the phantom images. Any ideas would be greatly appreciated!
Here's the code we use to implement both (where $(this) is the specific control :
$(this).kendoDateTimePicker({
format: "MM/dd/yyyy hh:mm:ss tt",
value: savedStartDate,
min: savedStartDate,
change: startDateTimeChangeRange
});
if (reloadPreviousModel && previousModel) {
$(this).val(previousModel[counter].StartDate);
}
$('.datetimeFromcontrol').find('.k-i-calendar').attr('aria-label', 'Select start date');
$('.datetimeFromcontrol').find('.k-i-clock').attr('aria-label', 'Select start time');
We recently upgraded from an older version of Telerik (2017 to 2022) and didn't have this issue in the older version. Inspecting the elements, I can't find anything that seems out of the ordinary, but have included the generated markup below:
<span class="k-datetimepicker k-input datetimeTocontrol k-input-solid k-input-md k-rounded-md" style="">
<input aria-label="Proxy end date" class="datetimeTocontrol k-input-inner" data-savedenddate="" data-val="true" data-val-date="The field EndDate must be a date." data-val-required="The EndDate field is required." id="datetimepickerTo_row1" name="PreferencesList[3].Controls[0].ProxyList[0].EndDate" title="Proxy end date" type="text" value="1/1/0001 12:00:00 AM" data-role="datetimepicker" role="combobox" aria-expanded="false" aria-haspopup="grid" aria-controls="datetimepickerTo_row1_dateview datetimepickerTo_row1_timeview" autocomplete="off">
<button tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button" unselectable="on">
<span class="k-icon k-i-clock k-button-icon" aria-label="Select end time" title="Select proxy end time">Select proxy end time</span>
</button>
<button unselectable="on" tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the date view" type="button">
<span class="k-icon k-i-calendar k-button-icon" aria-label="Select end date" title="Select proxy end date">Select proxy end date</span>
</button>
</span>
Hello,
I have a non-modal kendo window which can be dragged outside of the viewport. When such window regains focus the whole content of the document body is moved upwards, despite that the body has set CSS property overflow to hidden, width: 100%, height: 100%.
How can this be fixed?
BR
Dušan
function parameterEditor(container, options) {
switch (options.model.ObjectFieldTypeID) {
case @((int)ObjectFieldType.Types.Boolean):
boolEditor(container, options);
break;
case @((int)ObjectFieldType.Types.Integer):
numericEditor(container, options, 0);
break;
case @((int)ObjectFieldType.Types.Double):
numericEditor(container, options, 2);
break;
case @((int)ObjectFieldType.Types.DateTime):
dateTimeEditor(container, options, "kendoDateTimePicker", "M/d/yyyy H:mm", "H:mm");
break;
case @((int)ObjectFieldType.Types.Date):
dateTimeEditor(container, options, "kendoDatePicker", "M/d/yyyy");
break;
case @((int)ObjectFieldType.Types.Time):
dateTimeEditor(container, options, "kendoTimePicker", "H:mm");
break;
default:
stringEditor(container, options);
}
}
function dateTimeEditor(container, options, type, format, timeFormat) {
$('<input id=' + options.field + '>')
.appendTo(container)[type]({ /* dynamically choose the type of kendoXXXPicker (code other than "format" is universal) */
value: options.model.DefaultValue,
format: format,
timeFormat: timeFormat,
})
.data(type);
$("#" + options.field).on("change", function () {
options.model.set(options.field, kendo.toString($(this).val(), format) || $(this).val());
});
}

This example not works as expected:
https://dojo.telerik.com/ESAQEsip/2
It should only select: Red and Green.
Isn't it?
It's the same if I write the value of the input field by hand: value="Red"
Docs:
https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked#binding-lists-of-checkboxes-to-arrays
Many thanks
Using the demo (https://docs.telerik.com/kendo-ui/knowledge-base/timeline-using-range-bars) as a base, each has a unique ID. I have adjusted the data in the datasource to only use two different colors. The demo turns off the legend. But I need a legend to indicate what the colors on my chart mean. Turning on the legend (for both the demo and for mine) has two separate issues.
1) The legend contains a separate entry for each individual bar rather than combining them (either by category field or (prefered) the color).
2) The color in the legend doesn't match the color of the bar.
Here is the creation of my chart:
$("#LDP_chart").kendoChart({
dataSource: {
data: cdata.results,
group: {
field: "id",
dir: "asc"
}
},
series: [{
type: "rangeBar",
fromField: "from",
toField: "to",
categoryField: "key",
name: "#: group.items[0].seriesName #",
colorField: "color",
spacing: -1
}],
valueAxis: {
name: "value",
min: new Date(startDate + " 00:00").getTime() / 1000,
max: new Date(endDate + " 23:59:59").getTime() / 1000,
majorUnit: 24 * 60 * 60,
majorGridLines: {
color: "black"
},
labels: {
template: "#= kendo.toString(new Date(value * 1000), 'ddd MM/dd') #",
rotation: "auto"
}
},
categoryAxis: {
name: "category"
},
legend: {
visible: true,
position: 'bottom'
},
});
Google isn't helping me here. I did find an article saying #2 isn't possible because the legend isn't using colorField parameter of the datasource, but that was pretty dated.
Hi,
I am new to your controls, and was wondering if there is a Grid example, or another control that enabled the user to create something like this:
Regards,
George C. Geschwend