Bug report
The change event is being triggered when having an initially selected item in the DropDownList and then open the DropDownList and click on the default selected item. This bug is represented only in MVVM.
Reproduction of the problem
- Open this Dojo and run it. The three cascading DropDownLists will have default selected items
- Click on the first DropDownList and select the already selected "Confections" option
- The other two DropDownLists will be reset because of the change event thrown in the first DropDownList
Current behavior
The change event of a DropDownList with initial data selected is being triggered when clicking on the already selected value.
Expected/desired behavior
Selecting the already selected item of a DropDownList shouldn't trigger its change event because there is no actual change in the component's value. Please check this Dojo for the expected behavior.
Environment
- Kendo UI version: 2019.2.619
- jQuery version: x.y
- Browser: [all]
Thank you for your feedback. I managed to reproduce the scenario in this Dojo example. The current behavior looks like a bug. Therefore I have converted this thread to a Bug report in our Feedback portal. I also provide you a link with the issue to our public GitHub repository where you can also find further information on the matter. Until the bug is fixed, I would recommend you not to use 0 as grouping criteria in you project.
I also updated your Telerik Points as a thank you for your feedback.
Regards,
Veselin Tsvetanov
Progress Telerik
The "change" event on DropDownList is being triggered when the value change of the widget is via API and not triggered by user interaction.
Steps to reproduce:
https://dojo.telerik.com/oKeBEZUN
- Manually select a value for category (like Category 4); a console item should be written for user change
- Click the "change doc to empty" button which clears the category
- Click the "change doc to values" button which programmatically sets the category
Expected: a log item is NOT added because the change was programmatic and the log item is triggered on "change"
Actual: a log item is added even though the value change was programmatic
The change detection inside the select widget is faulty in that it seems to be effected by focus/blur state.
This issue was found after upgrading kendo UI. I believe the issue was introduced in 2018.1.117
Hello,
Drop down widget is defaulted to first option even though ng-model is undefined, in case where we bind same value to k-data-value-field and k-data-text-field.
Please have a look on the below sample code where you can find issue. My expectation is drop down should not default when model value is not assigned.
Code:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/dropdownlist/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<input kendo-drop-down-list
k-data-text-field="'name'"
ng-model="data"
k-data-value-field="'name'"
k-data-source="productsDataSource"
style="width: 100%"></input>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
// $scope.data=0;
$scope.productsDataSource = new kendo.data.DataSource({
data: [{
'name':'Active','id':0
},{'name':'Cancel','id':1}]
}
);
});
</script>
</body>
</html>
When using AngularJS binding for dropdownlist options in the latest version of Kendo (2018.3.1017), the option labels are not dynamically bound to the scope/controller. I changed one of the options to have the label {{::foo}} and set the field foo to "BAR" when initializing the scope. When I run this code with the latest version, the literal text "{{::foo}}" is displayed for the first item of the drop down. When I use an older version of Kendo (2018.2.516), the text "BAR" is displayed for that item. This is a regression bug that is causing an error in our product.
Here is a testcase that illustrates the problem. To toggle between the working and broken versions, change the CDN values.
Check out this idea. It may help solve this issue and help with UI presentation. http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/3767009-treeview-in-combobox
Admin edit: A Knowledge Base article that shows how you can achieve this: https://docs.telerik.com/kendo-ui/knowledge-base/disable-multiselect-items
A kendoDropDownList places an arrow to the right of the <select/> element, indicating it's a dropdown (.k-i-arrow-s). It would be cool if kendoMultISelect did the same thing. Clicking the <select/> element or the arrow should also toggle the visibility on the list items. See http://stackoverflow.com/questions/31825788/kendo-multiselect-to-have-arrow-icon-and-behavior-to-close-on-click .
find below appcomponent.html code: <kendo-dropdownlist [defaultItem]="defaultYear"
[data]="budgetYears"
[valueField]="budgetYears.value">
</kendo-dropdownlist>
and in appcomponent.ts file:
public budgetYears: Array<{ value: number }> = [
{ value: 2019 },
{ value: 2020 },
{ value: 2021 },
{ value: 2022 },
{ value: 2023 },
{ value: 2024 },
];
as mentioned above I have provided the mentioned codes but I am not getting the binded values. Instead of that I am getting [object Object]. Why it is so and where I am doing mistake. Please provide me a solution for this. Thanks
I have created a new Telerk UI for ASP.NET Core R2 2018 SP1 Project and added a DropDownList Component into page. When I use "Items" to add items manually everything is OK. but when I try to use DataSource to add Items using an Action remotely a console error is happened as "Uncaught TypeError: Cannot read property 'slice' of undefined". JSON items is received and nothing is shown because of that error. Please HELP
I'd like to be able to select multiple consecutive items by SHIFT + CLICK
New control ComboBox with CheckBoxes
It would allow selected items(Tags) to be displayed as well as add new ones or select ones from an autocomplete dropdown.
Would be nice to allow selecting items from multiselect several times
Adjust KendoDropDownList so that when the mouse scroll wheel does reach the end of the list the focus does not jump out of the control and scroll the form.
Add support for autoScroll to DropDownList options, such that the list scrolls when the mouse pointer reached the top of bottom of the container. Currently, autoScroll: true has no effect on that component. Mouse wheel scrolling of the options is not obvious to users, causing some to miss options that overflow the container.
I'd like to add separators between groups of items in a select / kendoDropDownList. Also known as a horizontal line or delimiter. The same question was asked here by someone else: http://www.telerik.com/forums/separator-in-dropdownlist The answer was that this is not supported.
The problem with relying on maxlength that is built into HTML elements is that they do not work in instances where you are rendering multiple inputs as with the kendo-combo-box. If I set the max length, it sets the max length of the select, which is does nothing. It needs to transfer that maxlength to the input text which is rendered along with the select. Yes, there are workarounds, but when you are using the controls in an angular mvvm environment where you write little to no jquery, the simplest fix should be to have the control code render the input fully given the information provided. TLDR: If given <select kendo-combo-box maxlength="3" please generate <input class="k-input" type="text" maxlength="3"
Currently the data-* attributes on the <option> tags are removed by the kendoDropDownList widget. Please pass them through so they can be used. After searching the kendo.all.js I found that there is currently no way the custom data-* can be added into the generated html code. I'm using MVVM for a rather large SPA. Some parts of the SPA is generated on the server (webservice) which is just a partial html. Which looks like (simplest one): <select data-role="dropdownlist" name="ProductTypeID" class="k-textbox"> <option value="9" data-cond="DependsValue(ProductTypeCategoryID,1)">Compliments cards</option> <option value="1" data-cond="DependsValue(ProductTypeCategoryID,1)">Flyers</option> <option value="3" data-cond="DependsValue(ProductTypeCategoryID,3)">Brochures</option> <option value="25" data-cond="DependsValue(ProductTypeCategoryID,6)">Roll-up banners</option> </select> In this case the data-cond is an attribute in which there is a (javascript) function that should be run to determine if this option is valid or not (it is made hidden if not). I was trying to convert this into a datasource which can be bound to the dropdownlist, but this has several drawbacks. The most important are: - There are almost 60 different of these kind of dropdowns that can be generated from the server; This means a lot of extra code and webservices. - Calling the webservice for each of them is way to slow since each field changes conditional values of other fields, and so the server would be called way to often. But on the client side this runs way faster. Even in javascript. - The data-* attributes should be supported accordingly the html5 standard to my humble opinion :) I found two questions regarding this, but both where unanswered. I add them here for you comfort :) http://www.telerik.com/forums/converting-standard-select-element-to-kendodropdownlist-removes-additional-properties-from-option-such-as-data- http://www.telerik.com/forums/how-to-access-data--attributes-in-a-option-after-converting-select-to-a-dropdownlist
Currently to close the colorPicker manually, we have to do ".kendoColorPicker('close')", however the rest of the dropdowns/combos uses ".kendoPopup('close')".
It will be great to support it as well with colorPickers to allow closing of all popup elements on scroll with a uniform solution