When I select initialize a kendoDropDownTree with checkboxes set to true, I experience all kinds of odd behavior visually. Inspecting the code shows that it is now a MultiSelectTree and not a DropDownTree yet there is no documentation and little support for this somewhat hidden component. I would actually prefer to have a MultiSelectTree without the checkboxes similar to a multiselect but with the grouping.
One issue, is that it does not respect the global settings for the corner radius of the box.
kendo.ui["DropDownTree"].fn.options["rounded"] = "none";
kendo.ui["MultiSelect"].fn.options["rounded"] = "none";
These seem to do nothing. When I guessed at "MultiSelectTree", I got a console error.
Another issue is that the UI looks very different from the regular multiselect and it doesn't seem to apply the .k-selected class as expected. When I check a box, the aria-checked is true but the k-selected class is not applied, this makes the item remain white rather than getting the blue background like it does in a regular multi-select. Can we get some consistency there?
Expanding an element does not change the height of the k-child-animation-container. It does show on the screen, but any styling targeting the container will not work because the container does not expand to fit the content.
I made my dropdown arrows 7px wider (k-treeview-toggle). Now the autoWidth makes the list 7px wider than the input element.
$("#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
}
});
$("#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.
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 have an html page with two kendomultiselect controls initialized with a code like the following:
function msAssegnatariConoscenza_GetDataSource()
{
return new kendo.data.DataSource(
{
serverFiltering: true,
schema: {
data: function (response)
{
//...
return response;}
},
transport: {
read: {
url: "../Api/Assegnatari_SearchWithUO", //Assegnatari_Search
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type)
{
//...
return JSON.stringify(data);
}
}
}
);
}
function msAssegnatariConoscenzaInit(fIsReadOnly)
{
if (!datiSmistamento.AssConoscenza) datiSmistamento.AssConoscenza = [];
$("#field_AssConoscenza").kendoMultiSelect({
autoBind: false,
dataTextField: "Nome",
dataValueField: "ID",
minLength: 3,
delay: 500,
height: 300,
headerTemplate: '...',
tagTemplate: '...',
itemTemplate: '...',
filtering: function (e)
{
if (!e.filter || !e.filter.value)
e.preventDefault();
},
dataSource: msAssegnatariConoscenza_GetDataSource() ,
value: null,
select: function (e)
{
var dataItem = this.dataItem(e.item.index());
return selectAssegnatarioConoscenza($(this.element[0]).attr("id"), dataItem, e);
},
change: function (e) { return msAssegnatariConoscenza_changeEvent(this, e); }, //Fired when value changed by the user, not form code.
dataBound: function (e) { e.sender.listView.focusFirst(); return false; }
});
}
When I delete an element in one control, I have to add it to the other control.
On the change event of the first I set the new value of the second with the following code:
msAssegnatariConoscenza.value([]); msAssegnatariConoscenza.dataSource.data(datiSmistamento.AssConoscenza); msAssegnatariConoscenza.value(datiSmistamento.AssConoscenza.map(avmAss => avmAss.ID));
Can anyone tell me what I have done wrong?
Hi,
How can I replace multiselect item remove icon with the old one? The new icon is svg icon. My version is 2024.3.1015
new icon
old icon
Hi everyone.
My multiselect works fine, but it adds a completely useless extra select at the bottom.
How can I remove it?
This is my code. The multiselect is fired by mvvm.
<select id="categories"
data-placeholder="Seleziona le categorie"
data-role="multiselect"
data-bind="source: categories, value: detailForm.data.selectedCategories"
data-value-field="id"
data-text-field="name"
>
</select>
Any hint?
Thanks in advance.
Hello we have a number of input elements, dropdowns, multiselects, etc which we are trying to defer loading for.
The problem is they use custom shared datasources, so setting them to AutoBind false is not automatically triggering the read() function, and we have added some additional dataSource behavior around multiselectors, which leads me to my question:
Is there a dataSource function like read() which only reads data from the server if its actually necessary? e.g. on the first load, if the dataSource has detected that the user has done something to the UI element to warrant a refresh, etc?
I know there are a tonne of undocumented functions on the kendo objects, some of them not intended for everyday use, but I'd be interested to know if any of them do what we need.
Hi!
I initialized a multiselect:
let kendoMultiSelect = $("#multisel").kendoMultiSelect({
dataSource: ['item1'],
value: ['item1'],
autoClose: false
}).data("kendoMultiSelect");
and function of refresh multiselect data:
$.ajax({
url: myUrl,
type: "POST",
data: window.kendo.stringify({ objId: that.objId }),
contentType: "application/json",
cache: false,
async: true,
success: function (response) { //response - array (for example: ['new1', 'new2', ...])
let widget = $("#multisel").getKendoMultiSelect();
widget.dataSource = response;
widget.value = response; //I need all the data to be selected at once
}
});
After success query the multiselect did not update.
When I try to open the multiselect dropdown I get an error: "TypeError: this.dataSource.flatView is not a function"
How can I update the multiselect.
I am trying to upgrade my Kendo UI Jquery installation from 2022 to 2024 and it is not going smoothly. One issue I'm having is that now my grids with locked columns do not span the whole width of their container. In the old version, the k-grid-table would expand to fill the width of the k-grid-content but now it seems that the columns retain their width, rather than growing like they used to. So now there is a large white space between the last column and the vertical scrollbar. I did notice that if I remove the inline style in the developer tools that is applied to the k-grid-table in the unlocked section, it fixes it.
Another issue I just discovered is on the multiselect. It seems that the class that used to be applied when the list was expanded is not there anymore ".k-state-border-down". I used this to target the down arrow and change it to a checkmark but now it seems there is no class to target in CSS. How would I change the arrow icon when the multiselect is expanded?
Old Version:
New Version:
How do I fix this, and is there documentation somewhere on all of the breaking changes between the two versions and how to fix them?