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
43 views

We need in our application a dropdowntree which has the following properties:

  • searchable
  • mvvm based
  • server-filterered

the following snipped is the configuration of the datasource:

let hDataSource = new kendo.data.HierarchicalDataSource({
	transport: {
		read:
			function (options) {
				let searchString = "";
				if (options.data.filter && options.data.filter.filters.length > 0) {
					searchString = "/" + options.data.filter.filters[0].value;
				}
				let url = SERVICE_URL;
				if (searchString) {
					url += searchString;
				}
				$.ajax({
					url: url,
					success: function (result) {
						options.success(result);
					}
				});
			}
	},
	schema: {
		model: {
			children: "items",
			hasChildren: "childsAvailable"
		}
	},
	serverFiltering: true
});

the url provided by the SERVICE_URL variable is filtering the data when searching for nodes

when i configure the widget in the normal way everything works just fine. But when i use mvvm the browser throws the following error.

maybe somebody can help me get mvvm to work since this is how all our forms are created.

Neli
Telerik team
 answered on 10 Jan 2025
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
2 answers
74 views

I have a JSON return from an endpoint that is hierarchical in a way but has different field names on each level for the ID and text. How would I make a kendo Drop Down Tree with this data without having to recreate the entire list? I will need to use the valueMapper, loadOnDemand, and get the value like this: .value(). It is like this (except with a lot more records): 


[
  {
    stateId: 1,
    stateName: "Florida",
    cities: [
      {
        cityId: 1,
        cityName: "Orlando",
        stores: [
          {
            storeId: 101,
            storeName: "I4"
          },
          {
            storeId: 202,
            storeName: "International Drive",
          },
          {
            storeId: 240,
            storeName: "UCF"
          }
        ]
      }
    ]
  }
]


Setven
Top achievements
Rank 1
Iron
Iron
 answered on 29 Aug 2024
1 answer
63 views
Does the DropDownTree support virtualization and valuemappers like the DropDownList does? I have a tree with 500 nested items on 3 levels (parent, child, grandchild). 
Nikolay
Telerik team
 answered on 19 Aug 2024
1 answer
65 views


In my project I use these css


/kendo-material/kendo.common-material.min.css" rel="stylesheet" />
/kendo-material/kendo.material.min.css" rel="stylesheet" />
/kendo-material/kendo.material.mobile.min.css" rel="stylesheet" />

I tried to use group in kendo drop down tree as in this example

https://dojo.telerik.com/iboWAviK

but

I get broken css


Do I need to update the css?
Neli
Telerik team
 answered on 05 Jun 2024
7 answers
1.2K+ views

I have been playing around with the new DropDownnTree component (which I love btw) but found that there isn't a "clear" event so I have to use the "change" event which the clear button triggers. The problem is that the value is not reset before triggering this event therefore I can't use it to check if the change event was fired by the clear button.

Dojo: https://dojo.telerik.com/UNIdEjEH

<div id="example">
    <div class="demo-section k-content">
        <h4>Select an item</h4>
        <input id="dropdowntree" style="width: 100%;" />
    </div>
    <script>
        $(document).ready(function () {
 
            // create kendoDropDownTree from input HTML element
            $("#dropdowntree").kendoDropDownTree({
                placeholder: "Select ...",
                height: "auto",
                dataSource: [
                    {
                        text: "Furniture", expanded: true, items: [
                            { text: "Tables & Chairs" },
                            { text: "Sofas" },
                            { text: "Occasional Furniture" }
                        ]
                    },
                    {
                        text: "Decor", items: [
                            { text: "Bed Linen" },
                            { text: "Curtains & Blinds" },
                            { text: "Carpets" }
                        ]
                    }
                ]
              , change: function(e) {
                kendo.alert("Value: " + this.text());
              }
            });
        });
    </script>
</div>

I would think either resetting the component before triggering the change button or adding a clear event is needed.

Thanks.

John
Top achievements
Rank 1
Iron
 answered on 10 Apr 2024
1 answer
81 views

I have a DropDownTree on my site. When the text of the item is too long to fit I am seeing a horizontal scrollbar and the gray colored background does not expand. I don't want auto width as that makes the container grow larger than the input control is. How can I instead have it wrap? 

Neli
Telerik team
 answered on 27 Mar 2024
1 answer
272 views

I have a kendo dropdown tree with a selected value that was there on initialization. When the user clicks on the dropdown for the first time, I want the list to auto expand the selected node so the user can see it the child item. How do I do this? 

Similarly, I would like the user to be able to click on a parent node and, instead of selecting the parent node, since that isn't allowed in my case, it should just expand so they can see the children. 

Neli
Telerik team
 answered on 27 Mar 2024
1 answer
101 views

My requirement is similar to this question "How to reset the scroll position in a Kendo Dialog (jquery) in Kendo UI for jQuery | Telerik Forums"Reset Scroll Position in Kendo Dialog jQuery

My only requirement is to reset the scroll position of the dropdown whenever a button is clicked. Currently, when I reopen the dropdown, it remembers the last scroll position. I want this position to be reset whenever the user performs an action, such as clicking a button.

Neli
Telerik team
 answered on 26 Mar 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?