or
1 answer
560 views
Hello,
I'm using a model popup in which I bind the kendo grid and set the grid right-click to open the context menu. However, the context menu does not appear. I'm using Kendo 2023.2.606 version. Please leave your feedback.
This below same code work fine in normal page. But, it's not working in model popup.
Context menu Code is here:
<ul id="clientSearchGridContextMenu" class="hide"><li id="clientSearchGridContextMenuAddFavourite"><span class="menu-item k-link">@Resource.lblAddFavourite</span></li>
<li id="clientSearchGridContextMenuRemoveFavourite" class="border-bottom-div"><span class="menu-item k-link">@Resource.lblRemoveFavourite</span></li>
<li id="clientSearchGridContextMenuClose"><span class="menu-item k-link">@Resource.lblClose</span></li>
</ul>
JavaScript code for context men:
bindClientSearchGridContextMenu: function (favourites) {clientManagement.variable.clientSearchGridContextMenuAddFavourite.css('display', favourites ? 'none' : 'block');
clientManagement.variable.clientSearchGridContextMenuRemoveFavourite.css('display', favourites ? 'block' : 'none');
clientManagement.variable.clientSearchGridContextMenu.kendoContextMenu({
target: "#clientMatterGrid",
filter: "tbody > tr",
open: function (e) {
clientManagement.variable.clientSearchGridContextMenu.addClass("show");
let node = $(e.target);
$("#clientMatterGrid").data('kendoGrid').select(node);
},
select: function (e) {
let node = $(e.target);
$("#clientMatterGrid").data('kendoGrid').select(node);
switch ($(e.item).attr('id')) {
case "clientSearchGridContextMenuAddFavourite":
clientManagement.addRemoveFavourite(true);
break;
case "clientSearchGridContextMenuRemoveFavourite":
clientManagement.addRemoveFavourite(false);
break;
case "clientSearchGridContextMenuClose":
clientManagement.variable.clientSearchGridContextMenu.data("kendoContextMenu").close();
break;
}
}
});
}
1 answer
67 views
$("#msUsers").kendoMultiSelect({
placeholder: "Select Users...",
autoClose: false,
dataTextField: "UserName",
dataValueField: "UserId",
virtual: {
itemHeight: 40,
mapValueTo: "dataItem",
valueMapper: function (options) {
var ids = options.value;
if (!ids.length) {
options.success([]);
return;
}
$.ajax({
url: "/Home/GetUserByIds",
traditional: true,
data: { ids: ids },
success: function (response) {
options.success(response.length ? response : []);
},
error: function (xhr) {
console.log("Error:", xhr.responseText);
}
});
}
},
dataSource: {
transport: {
read: {
url: "/Home/BindUsers",
dataType: "json",
data: function (options) {
return {
skip: options.skip,
take: options.take,
filter: options.filter
};
}
},
parameterMap: function (data, action) {
if (action === "read") {
return {
take: data.take,
skip: data.skip,
filter: data.filter?.filters?.[0]?.value || ""
};
}
return data;
}
},
schema: {
data: "Data",
total: "Total"
},
pageSize: 40,
serverPaging: true,
serverFiltering: true
}
});I’m using Kendo UI MultiSelect with virtualization enabled, and I’ve noticed an issue where calling:
$("#multiSelect").data("kendoMultiSelect").value([1,2]); //Where [1,2] already exists in the dataSource.
Immediately after setting the value, I attempt to retrieve it, but the result is an empty array [].
I tested this with setInterval(), and for a few milliseconds, the value remains empty before updating correctly.
My code logic requires retrieving the value immediately after setting it and passing it to an API call. However, as mentioned, I receive an empty array.
Is there an event I can listen for before proceeding?
I could use setTimeout(), but that feels like a hack.
Nikolay
Telerik team
answered
on
28 Feb 2025
1 answer
129 views
kendo.drawing.PDFOptions
I am using this option to download the pdf format of the kendo diagram control. How can I add the language options, to download the PDF in different languages?
/Kumeri.
Nikolay
Telerik team
answered
on
27 Feb 2025
0 answers
81 views
In my formatting of the grid I set the grid column titles. However when the user groups by the columns the k-group-indicator button uses the same "Title". Is there a way to have the k-group-indicator display a different text? My issue is that it doesn't format as HTML the same as the grid so it displays the html markup "<br/></th>" which is not what I want.
field: "ClientName", title: "[[[Client<br/>Name]]]",
template: "#= data.ClientName #",
width: 100,
groupHeaderTemplate: "[[[Client Name]]] ${data.value}",
hideOnGroup: true
},
{
field: "Acct", title: "[[[Account<br/>Number]]]",
template: "#= data.Acct #",
width: 100,
groupHeaderTemplate: "[[[Account Number]]] ${data.value}",
hideOnGroup: true
},
{
field: "ClientName", title: "[[[Client<br/>Name]]]",
template: "#= data.ClientName #",
width: 100,
groupHeaderTemplate: "[[[Client Name]]] ${data.value}",
hideOnGroup: true
},
{
field: "Acct", title: "[[[Account<br/>Number]]]",
template: "#= data.Acct #",
width: 100,
groupHeaderTemplate: "[[[Account Number]]] ${data.value}",
hideOnGroup: true
},3 answers
2.2K+ views
Hi,
AS my title says, how do I add a tooltip to a disabled kendoButton, for the purpose of telling a user why its disabled.
Dojo: https://dojo.telerik.com/OTOpIrOV
Thanks,
Grant
Martin
Telerik team
answered
on
26 Feb 2025
1 answer
59 views
I am using KendoGrid 2025.1.211.
The reorderable property is set like this:
reorderable: {
rows: { clickMoveClick: true }
},
- The clickMoveClick does not appear to have any effect
- I can drag rows up and down successfully but I CANNOT drag any row to the topmost row position. I can drag a row to the second row position and then drag the top row down one. In this way I can get a row to the top but this CANNOT be the intended design?
Martin
Telerik team
answered
on
26 Feb 2025
2 answers
1.2K+ views
I've been trying to figure a workaround for this problem.
Recently I've discovered that kendo tooltip isn't working on disable buttons.
I've made an example to show you:
http://dojo.telerik.com/EZogO/5
when the tooltip button is enable, kendo's tooltip work fine. But, if you disable the button it will stop working.
The problem is that this doesn't prevent the browser from showing his default tooltip.
Is there any solution?
Thanks in advance.
0 answers
138 views
Hello everyone,
I'm currently working with Kendo UI's MultiSelect widget, and I’m experiencing an issue specifically on Android mobile devices.
On desktop, everything works fine. However, when testing on mobile, the MultiSelect only opens when I perform a long press. It does not open with a single tap, which is how I want it to function.
I’ve tried binding both touchstart and touchend events manually, but the issue persists. I also attempted to use FastClick to remove any tap delays, but the problem still occurs.
Here’s a snippet of my code:
javascript
Copy
$("#test_0").kendoMultiSelect({
itemTemplate: "<input type='checkbox'/>" + " #:data.adressName#",
placeholder: "xyz"
dataTextField: "adressName",
dataValueField: "adressName",
tagTemplate: '<span title="#:adressName#">#:data.adressName#</span>',
dataBound: function () {
var items = this.ul.find("li");
setTimeout(function () {
checkInputs(items);
});
},
change: function () {
var items = this.ul.find("li");
checkInputs(items);
}
});
Has anyone else experienced this issue? How can I make Kendo MultiSelect work with a single tap (not requiring a long press) on Android mobile devices?
Any help or suggestions would be greatly appreciated!
Thanks!
I'm currently working with Kendo UI's MultiSelect widget, and I’m experiencing an issue specifically on Android mobile devices.
On desktop, everything works fine. However, when testing on mobile, the MultiSelect only opens when I perform a long press. It does not open with a single tap, which is how I want it to function.
I’ve tried binding both touchstart and touchend events manually, but the issue persists. I also attempted to use FastClick to remove any tap delays, but the problem still occurs.
Here’s a snippet of my code:
javascript
Copy
$("#test_0").kendoMultiSelect({
itemTemplate: "<input type='checkbox'/>" + " #:data.adressName#",
placeholder: "xyz"
dataTextField: "adressName",
dataValueField: "adressName",
tagTemplate: '<span title="#:adressName#">#:data.adressName#</span>',
dataBound: function () {
var items = this.ul.find("li");
setTimeout(function () {
checkInputs(items);
});
},
change: function () {
var items = this.ul.find("li");
checkInputs(items);
}
});
Has anyone else experienced this issue? How can I make Kendo MultiSelect work with a single tap (not requiring a long press) on Android mobile devices?
Any help or suggestions would be greatly appreciated!
Thanks!
Rasika
Top achievements
Rank 1
Rank 1
asked
on
22 Feb 2025
0 answers
47 views
Is there a way to enable free form movement of the nodes of an org chart, through drag and drop? I thought maybe there would be a way to incorporate the kendoDraggable functionality, but I have not yet gotten it to work. If the nodes were positionable, would the chart be able to handle it and connect them correctly?
Thanks for any help along these lines anyone can offer!
0 answers
110 views
function GetUsers() {
$("#msUsers").kendoMultiSelect({
placeholder: "Select Users...",
autoClose: false,
autoWidth: true,
/* tagMode: "none",*/
dataTextField: "UserName",
dataValueField: "UserId",
virtual: {
itemHeight: 40,
mapValueTo: "dataItem",
valueMapper: function(options) {
var ids = options.value;
if (!ids.length) {
options.success([]);
return;
}
$.ajax({
url: "/Home/GetUserByIds",
traditional: true,
data: {
ids: ids
},
success: function(response) {
if (!response.length) {
options.success([]);
return;
}
options.success(response);
},
error: function(xhr) {
console.log("Error:", xhr.responseText);
}
});
}
},
dataSource: {
transport: {
read: {
url: "/Home/BindUsers",
dataType: "json",
data: function(options) {
return {
skip: options.skip,
take: options.take,
filter: options.filter
}
}
},
parameterMap: function(data, action) {
if (action === "read") {
return {
take: data.take,
skip: data.skip,
filter: data.filter && data.filter.filters && data.filter.filters[0] ?
data.filter.filters[0].value :
"" // Default to empty if no filter is applied
};
} else {
return data;
}
}
},
schema: {
data: "Data",
total: "Total"
},
pageSize: 40,
serverPaging: true,
serverFiltering: true
},
enable: false,
open: function(e) {
debugger;
var multiselect = this;
var selectedValues = multiselect.dataItems(); // Get the selected value objects
if (selectedValues.length) {
var dataSource = multiselect.dataSource;
var currentData = dataSource.view();
const selectedUserIds = new Set(selectedValues.map(selected => selected.UserId));
var remainingUsers = currentData.filter(user =>
user.UserId && !selectedUserIds.has(user.UserId)
);
var sortedData = selectedValues.concat(remainingUsers);
console.log(sortedData);
dataSource.data(sortedData); // THIS BREAKS VIRTUALIZATION!
}
},
height: 400,
});
}
I am using a Kendo MultiSelect widget with virtualization to handle a large dataset.
The issue I am facing is that when the multiselect dropdown is opened, selected items that are not part of the currently loaded subset are not displayed.
I need to ensure that all selected items are displayed first without breaking virtualization.
How can I ensure that all selected items are displayed first in a virtualized Kendo MultiSelect without breaking virtualization? Is there a way to dynamically load selected items and merge them with the current dataSource data?
Joe
Top achievements
Rank 1
Rank 1
asked
on
21 Feb 2025
