Telerik Forums
Kendo UI for jQuery Forum
1 answer
14 views

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.

Neli
Telerik team
 answered on 10 Jun 2025
1 answer
47 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
0 answers
64 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!
Rasika
Top achievements
Rank 1
 asked on 22 Feb 2025
0 answers
57 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
 asked on 21 Feb 2025
0 answers
51 views

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));
So if I choose a new value in the second control typing chars and choosing from list, and then delete one on the first control, when I programmatically set the new value of the second control it will not be updated.

 

Can anyone tell me what I have done wrong?

Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
 updated question on 10 Jan 2025
1 answer
84 views

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

Nikolay
Telerik team
 answered on 24 Dec 2024
0 answers
42 views

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.

Marco
Top achievements
Rank 2
Iron
Iron
 asked on 18 Nov 2024
0 answers
86 views

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.

iCognition
Top achievements
Rank 1
Iron
 asked on 25 Sep 2024
0 answers
207 views

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.

Vsevolod
Top achievements
Rank 1
Iron
Iron
 asked on 10 Sep 2024
1 answer
559 views

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? 

Yordan
Telerik team
 answered on 19 Jul 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?