Bug report
Setting `autoWidth = true` breaks height in mobile adaptiveMode
Reproduction of the problem
https://dojo.telerik.com/wUbmMdkt
autoWidth: true"
autoWidth: false
Environment
Kendo UI version: [all]
Browser: [all ]
Currently, the Virtualized DropDownList does not handle the autoWidth property, as describe in the offical client-side API documentation.
It would be beneficial if there is a way to circumvent around this limitation.
Bug report
Binding an MVVM DropDownList to a property that is null results in an error on the console.
Reproduction of the problem
- Open this example - https://dojo.telerik.com/@martin.tabakov@progress.com/eNUMeLix
Current behavior
An error is thrown
Expected/desired behavior
No errors should be thrown
Environment
- Kendo UI version: 2023.1.117
- Browser: [all]
Hi Team,
I would like to request to add a class which associates with the Kendo DropDownList. This way, the developer could use CSS instead of jQuery to change the style of the specific popup.
Thank you!
1. Open the dojo using Google Chrome browser;
2. Open the first dropdown list;
3. Select any option from the list;
4. When the drop down closes, press Ctrl+V. The selected value changes for each time the keys combination is used.
Expected: CTRL+V combination does not trigger value selection.
Describe the bug
While the loading icon is visible in the DropDownList when fetching data, the widget's height is changed.
To reproduce
- Open this Dojo example - https://dojo.telerik.com/AFuQItIv/4
- Select an item in the first DropDownList
You can compare the height of the two dropdownlists
Expected behavior
The height of the DropDownList shouldn't change when the loading icon is visible.
- Kendo UI for jQuery
Affected browsers (please remove the unneeded items)
- All
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>
Hi Team,
I'd like to request the functionality to add a Clear Button for the Kendo UI DropDownList similar to the ComboBox.
Thank you!
I have upgraded a huge project we have, from Kendo UI 2017 to the latest version.
I managed to fix all the incompatibility issues that I had with the latest version and now it's ready to go live.
In the final regression tests our customer found a bug and now we are stack and cannot deploy the project.
Here is the problem:
In the DropdownList, if you type something and then press the clear button, the change event is firing two times. One with the value that you typed before and then one again with an empty value (the right one). The biggest problem is that there is no way to determine that the first event is coming from the clear button and not from the user, so I cannot find any workaround this.
I searched and I found that this started after this change.
You can check this dojo for a reproduction of the problem.
Steps:
Type "it" in the dropdownlist,
Wait for the items to popup
Don't select any item but press the clear button of the dropdownlist
You can see the attached image the wrong events.
If you select a version after 2019 R3, the change event is firing twice. If you select an older version the change event is not firing at all.
I can understand a change event with an empty value and I don't have any problem with that, but the first event is totally wrong.
Is there any quick solution to this so we can catch the deadline and deploy the new version of our project?
Thank you for your time,
John Dendrinos
I'd like to be able to style the matching text from autocomplete, so I'd like the option for kendo to perhaps wrap the text in a span or something I can get a handle on... So if I typed "Back" it'll give me results like this <li><span class='t-match'>Back</span> to the future</li>
Currently when a combo box is used on an edit form, when the combo box first loads, the value property it is bound to (e.g. an int id) is displayed as the text until the databound event fires, and the text value associated with that value can be loaded. It gives the combo boxes an unprofessional look, as they briefly display a number until they are done loading. It also creates some other problems when you have a custom filter function, as described here: http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=781390 I recognize that you would not want to change the default behavior since it would be a breaking change, but could you add a flag to toggle this behavior off. You could add a property called "DefaultTextToValue" which is set to True by default, and if you set to false, the display would remain blank until the text value was set by the databound event.
I would like to assign multiple values to "dataTextField" property as a part of kendoAutoComplete widget initialization process. This will enable to search and filter values across multiple data fields.
When bound to oData, the autocomplete contains filter should treat each WORD as a new "substringof"....or make a new odata advanced contains type\property. This is more what users expect when searching...and the odata spec has it covered. http://www.kendoui.com/forums/ui/autocomplete/odata-google-like-filter.aspx
Currently multiselect increases its height to accommodate all selected values. Can you please provide a way where it reverts back to its height after selecting all values and shows 1 value and count for rest of the values selected? Here is a screenshot: http://s11.postimg.org/ur5qqy5lv/Multi_Select.png You can see it's implementation selecting values in "Type Location or Project" multiselect on Residential Tab http://www.99acres.com/
The combobox currently doesn't react on the disabled-attribute for options. It should be possible to make single options visible but not selectable with this attribute as in original html-select: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled I found no way to do this yet.
I want dropdownlist to have group by with 2 fields
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
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"