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.
We need in our application a dropdowntree which has the following properties:
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.
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.
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"
}
]
}
]
}
]
/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 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.
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?
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.
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.