or
1 answer
35 views
Append not showing tab content and throws when you try to select by index. Version 2024.3.1015
<div class="row" id="managing-directors-tab-strip"></div>
const tabStrip = $("#managing-directors-tab-strip", container).kendoTabStrip({
animation: false
}).data("kendoTabStrip");
tabStrip.append({ text: "Tab 1", content: "<text>111</text>" });
tabStrip.select(index);Uncaught TypeError: Cannot read properties of undefined (reading 'id')
at init.contentElement (kendo.tabstrip.js:621:71)
at init.contentHolder (kendo.tabstrip.js:631:41)
at init._click (kendo.tabstrip.js:984:38)
at init._itemClick (kendo.tabstrip.js:1208:22)
at HTMLUListElement.dispatch (event.js:335:27)
at elemData.handle (event.js:139:28)
1 answer
27 views
Hi,
I am currently trying to upgrade to Kendo UI JQuery v2026.1.212 and have noticed changes related to the way messages are posted to the chat. In previous versions (v2025.2.702) I could do the following:
function getChatUser(){
return {
id: kendo.guid(),
name: "Admin",
iconUrl: "/Images/chatIcon.svg"
};
}
function postMessages(){
const myChat = $("#chat").data("kendoChat");
const myCustomTemplate = kendo.template($("#custom-template").html());
kendo.chat.registerTemplate("custom", myCustomTemplate);
const MD_MESSAGE = kendo.template("<div class='k-message'><div class='k-bubble fw-chat-bubble'>#= DOMPurify.sanitize(marked.parse(text)) #</div></div>");
kendo.chat.registerTemplate("md_message", MD_MESSAGE);
myChat.renderMessage({
type: "md_message",
text: "**Hello** this is a text *markdown* message"
}, getChatUser());
myChat.renderMessage({
type: "custom",
html: `<img src="/Images/chatIcon2.svg" width="400" height="350" alt="" />`
}, getChatUser());
}How do I post messages to the chat referencing a template with v2026.1.212?
Thanks,
Euan
Nikolay
Telerik team
answered
on
27 Feb 2026
1 answer
79 views
would like to check if the following chart layout is possbile for Kendo Bar chart?
and also i would like to have an onHover event that will change the chart color. for example if i hover on the category or chart for Strategy Development to change its color to like this
Neli
Telerik team
answered
on
26 Feb 2026
6 answers
3.6K+ views
Suppose I've got an array of items, and I'd like to edit an attribute of each of those items. So I create a div, bind my array of items to it, and then specify a template to use to render each item using the data-bind attribute to bind the value of my item an input box.
e.g. (this is derived from another example I found in a separate thread),
<div id="example" data-template="template" data-bind="source: arr"></div>
<script id="template" type="text/x-kendo-template">
<div> Age: ${age}</div>
<input type="text" data-bind="value: age"/>
</script>​
and
var arr = new kendo.data.ObservableArray([
{ name: "John Doe", age: 23 },
{ name: "Jane Doe", age: 34 }
]);
var viewModel = kendo.observable({
arr: arr
});
kendo.bind($("#example"), viewModel);
setTimeout(function() {
viewModel.arr[1].set('age',54);
}, 2000);
​
From this example, I'd expect to see the first div and text box with values of 23, and the second div and text box with values of 34. Instead I get the first div with 23 and the first text box with 34, and the second div with 34 and the second text box empty. Then when the function specified in setTimeout runs, it changes the value in the first text box, instead of the second one.
Here's a JSFiddle where you can try it: http://jsfiddle.net/2R3tF/
Seems simple to me, but I must not be understanding the plumbing enough to figure out why this doesn't work. Can someone explain, and ideally provide a version that works?
e.g. (this is derived from another example I found in a separate thread),
<div id="example" data-template="template" data-bind="source: arr"></div>
<script id="template" type="text/x-kendo-template">
<div> Age: ${age}</div>
<input type="text" data-bind="value: age"/>
</script>​
and
var arr = new kendo.data.ObservableArray([
{ name: "John Doe", age: 23 },
{ name: "Jane Doe", age: 34 }
]);
var viewModel = kendo.observable({
arr: arr
});
kendo.bind($("#example"), viewModel);
setTimeout(function() {
viewModel.arr[1].set('age',54);
}, 2000);
​
From this example, I'd expect to see the first div and text box with values of 23, and the second div and text box with values of 34. Instead I get the first div with 23 and the first text box with 34, and the second div with 34 and the second text box empty. Then when the function specified in setTimeout runs, it changes the value in the first text box, instead of the second one.
Here's a JSFiddle where you can try it: http://jsfiddle.net/2R3tF/
Seems simple to me, but I must not be understanding the plumbing enough to figure out why this doesn't work. Can someone explain, and ideally provide a version that works?
%20(4).jpg)
2 answers
66 views
Hi,
In version 2026.1.212 Kendo Chat is no longer calling the suggestionsTemplate method.
I am following your example on how to make a own suggestionsTemplate here:
https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/chat/configuration/suggestionstemplate
I made a Kendo Dojo UI from your example:
https://dojo.telerik.com/DmuxfMWh
As you can see the method is never called.
Eyup
Telerik team
answered
on
18 Feb 2026
1 answer
32 views
Date Header displays an incorrect value "12:00 AM" in every slot when majorTickis set to "full day" (1440) in timeline views.
<script>
$(function () {
$("#scheduler").kendoScheduler({
date: new Date("2025/6/13"),
eventHeight: 50,
majorTick: 1440,
views: [ "timeline", "timelineWeek", "timelineWorkWeek", "timelineMonth"],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/service/v2/core/meetings"
},
update: {
url: "https://demos.telerik.com/service/v2/core/meetings/update",
type: "POST",
contentType: "application/json"
},
create: {
url: "https://demos.telerik.com/service/v2/core/meetings/create",
type: "POST",
contentType: "application/json"
},
destroy: {
url: "https://demos.telerik.com/service/v2/core/meetings/destroy",
type: "POST",
contentType: "application/json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return kendo.stringify(options.models);
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms"],
orientation: "vertical"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#2572c0" },
{ text: "Meeting Room 201", value: 2, color: "#f8a398" }
],
title: "Room"
},
{
field: "attendees",
name: "Attendees",
dataSource: [
{ text: "Alex", value: 1 },
{ text: "Bob", value: 2 },
{ text: "Charlie", value: 3 }
],
multiple: true,
title: "Attendees"
}
]
});
});
</script>
Anton Mironov
Telerik team
answered
on
18 Feb 2026
1 answer
37 views
In Kendo Scheduler Angular,
Date Header displays an incorrect value when slotduration is set to "full day" in timeline month view. it should not display 12:00 AM in each slot.
<kendo-scheduler
[kendoSchedulerBinding]="events"
[selectedDate]="selectedDate"
[slotDuration]="1440"
>
<kendo-scheduler-timeline-month-view>
</kendo-scheduler-timeline-month-view>
</kendo-scheduler>
.
Zornitsa
Telerik team
answered
on
18 Feb 2026
1 answer
38 views
is it possible to add a key/value pair array for datasource for DropDownList
The guide here shows how to add a value/array as the datasource.
<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: {
data: ["One", "Two"]
}
});
</script>
However I need something like this. i.e a key/value pair.
i.e I need to display the key in the dropdown but return the value if the dropdown is selected.
<input id="dropdownlist" /><script>
$("#dropdownlist").kendoDropDownList({
dataSource: {
data: [{email: 'one'} , {email: 'Two'}],
dataTextFiled: "email",
dataValueField: "email"
}
});
</script>
Eyup
Telerik team
answered
on
11 Feb 2026
1 answer
42 views
Hi,
Kendo Chat with skipSanitization: true are still changing the messages so the outputted html breaks since it get A href tag inserted in bad places.
For example if I try to render an img tags it gets broken since a new A tag are being inserted in it so the html in the output message are invalid.
If the "src" url of the image tag doesnt starts with "https:" then it works. So now I need to do something like this to get it working:
let url = "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg";
url = url.replace("https:", "");
// becomes "//demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg"Same issue with A href tags url. If they contains a query string then they also became broken. This can also be fixed by removing https: so they just start with //. Works until you have www in them, then it will never work.
Here is examples of this issue:
https://dojo.telerik.com/RrwHKAfv
I want to use a markdown parser (https://www.npmjs.com/package/marked) with DOMPurify.sanitize for my chat but doenst really work right now.
Am I doing something wrong or have I missunderstood what "skipSanitization: true" means?
Best Regards,
Douglas
Viktor Tachev
Telerik team
answered
on
11 Feb 2026
1 answer
55 views
I am trying to implement keyboard only navigation on a web application I am developing to meet accessibility requirements. I am running into problems with the Kendo Grid.
Here is a dojo: https://dojo.telerik.com/KUcMekCh
I have a grid with 2 locked columns with a button in the first column and a hyperlink in the second column, the other columns just have text. I set navigatable to true. None of my fields are editable.
When the user tabs to the grid, they first get the search bar in my custom grid toolbar. Next they tab to the button (which happens to be a bootstrap dropdown menu but I don't think that is relevant). Here is where the issues start:
- They then hit tab again and sometimes are taken to the hyberlink while other times they are taken to the next row, skipping column 2's hyperlink.
- The grid does not always enter Kendo's navigation mode. When it doesn't, there is no way for the user to interact with the column header which has the sort and tooltip buttons in it.
- When they get to the bottom of the grid, the locked side will scroll vertically but the unlocked side remains in place, causing the rows to be misaligned.
- When an input cell is in the unlocked portion of the table, the user has to tab through the entire list before getting back to editing the input for a row. This isn't logical.
- I worry that if there were editable cells, which some of my grids have, the user won't be able to tab to the next editable cell and instead will be forced to navigate through every cell. I don't want to make it more difficult for a normal user in order to accommodate a keyboard only user so there needs to be a way for both to work well.
- Often the focus ends up on the unlocked table which attempts to put a blue outline around that, however, the outline isn't fully visible since that is inside of a scrollable div.
- You can click into a cell with navigatable set to true and then use the navigation but that doesn't work for a keyboard only user.
- When navigatable is not turned on, the user cannot scroll vertically if they tab to the table.
Nikolay
Telerik team
answered
on
09 Feb 2026
