Telerik Forums
Kendo UI for jQuery Forum
1 answer
33 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

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
88 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
87 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
74 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
66 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
84 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
315 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
105 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
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?