Hello,
I am binding a Kendo Dropdownlist from a remote datasource just like in this example:
http://demos.kendoui.com/web/dropdownlist/remotedatasource.html
My problem is that I can't figure out a way to set the width of the dropdownlist automatically based on the largest item. Instead of having an ellipsis on the selected item or have the text wrap in the drop down options (like in the example above), I want the dropdowns width to auto adjust based on it's longest item just like a regular drop down list. Setting the css width to auto did not work for me. Setting it to 100% stretches the dropdown accross the page which i don't want either.
Is there a way to set the dropdowns width to adjust automatically based on it's items?
Thanks in advance!
I am binding a Kendo Dropdownlist from a remote datasource just like in this example:
http://demos.kendoui.com/web/dropdownlist/remotedatasource.html
My problem is that I can't figure out a way to set the width of the dropdownlist automatically based on the largest item. Instead of having an ellipsis on the selected item or have the text wrap in the drop down options (like in the example above), I want the dropdowns width to auto adjust based on it's longest item just like a regular drop down list. Setting the css width to auto did not work for me. Setting it to 100% stretches the dropdown accross the page which i don't want either.
Is there a way to set the dropdowns width to adjust automatically based on it's items?
Thanks in advance!
5 Answers, 1 is accepted
0
Hi Tonny,
The behavior is not supported out-of-the-box, because the Kendo input widgets have a default width set in the base CSS. However, you can use the following approach:
http://jsfiddle.net/TBkEe/
Setting auto width will not work, because this will make the DropDownList as wide as its current value. The value list is a separate (detached) element.
Greetings,
Dimo
the Telerik team
The behavior is not supported out-of-the-box, because the Kendo input widgets have a default width set in the base CSS. However, you can use the following approach:
http://jsfiddle.net/TBkEe/
Setting auto width will not work, because this will make the DropDownList as wide as its current value. The value list is a separate (detached) element.
Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tonny
Top achievements
Rank 1
Rank 1
answered on 23 May 2012, 09:19 PM
Thanks Dimo! This worked great. At first it didn't work for me, but when I upgraded to version 2012.1.515 from 2012.1.322, it started working.
Thanks again,
Tonny
Thanks again,
Tonny
0
Kasey
Top achievements
Rank 1
Rank 1
answered on 01 Aug 2012, 06:13 PM
This solution works fine for static drop-down lists, but does not work properly when the drop-down list values can change. The failure happens when the user clicks the drop-down list, and then later the drop-down values are changed. When the user opens the drop-down list, the list values are moved into a k-animation-container. Then when the list values are changed, the code no longer resizes the drop-down list (correctly). Is there a solution to this problem?
Update: I kludged my away around and developed this solution to make the Kendo UI Drop-Down List auto-resize itself. There's probably a better way to do it, but this does work for me (using Kendo UI 2012.2.710). Whenever I force a data source refresh by calling viewModel.dropDownSource.read(), the drop-down automatically updates and resizes based on content.
Javascript:
HTML
MVVM View Model
Update: I kludged my away around and developed this solution to make the Kendo UI Drop-Down List auto-resize itself. There's probably a better way to do it, but this does work for me (using Kendo UI 2012.2.710). Whenever I force a data source refresh by calling viewModel.dropDownSource.read(), the drop-down automatically updates and resizes based on content.
Javascript:
// make this a reusable function$.fn.autoDropDownWidth = function () { var me = this; // dataBound is an undocumented event I found mentioned in forums this.data("kendoDropDownList").bind("dataBound", function (e) { // could not get e.item to work as documented, used "me" instead var popup = me.data("kendoDropDownList").popup.element; var container = popup.parent(".k-animation-container"); var containerStyles; var popupStyles; if (container[0] !== undefined) { containerStyles = container.attr("style"); // save styles // blank out container styles or width calculation breaks container.attr("style", ""); popupStyles = popup.attr("style"); // save popup styles // reset styles to roughly original (before container) popup.attr("style", "") .css("position", "absolute") .css("height", "200px") .css("display", "none"); } // calculate width from unconstrained width of the list items var width = popup.css("visibility", "hidden").show().outerWidth(); width += 20; // +20 for the scroll bar / drop-down arrow width if (container[0] !== undefined) { // restore container and popup styles, but update widths container.attr("style", containerStyles).width(width); popup.attr("style", popupStyles).width(width); width += 6; // +6 for the padding/margin of container } popup.hide().css("visibility", ""); me.closest(".k-widget").width(width); }); return this; // maintain chainability};// create the drop-down list, make it auto-sizing$("#dropdown").kendoDropDownList().autoDropDownWidth();HTML
<input id="dropdown" data-option-label="-" data-text-field="Name" data-value-field="Value" data-bind="source: dropDownSource, value: dropDownItem" />MVVM View Model
var viewModel = kendo.observable({ dropDownItem: null, dropDownParameter: 0, dropDownSource: new kendo.data.DataSource({ transport: { read: { // example url: /path/to/dropdown/items?itemGroupId=0 url: "/path/to/dropdown/items", // takes query parameter itemGroupId data: { itemGroupId: viewModel.get("dropDownParameter") } } } })});// bind view to view modelkendo.bind($("#view"), viewModel); // the drop-down is inside "#view"0
Tom
Top achievements
Rank 1
Rank 1
answered on 14 Nov 2012, 10:47 PM
Kasey can you post a sample demo of your findings?
I am trying to figure out is this type of effect can be done with Kendo Controls (specfically for IE 8 which is our current browser)?
http://jsbin.com/acado/6 (view demo in IE)
I am trying to figure out is this type of effect can be done with Kendo Controls (specfically for IE 8 which is our current browser)?
http://jsbin.com/acado/6 (view demo in IE)
0
Jeff
Top achievements
Rank 1
Rank 1
answered on 05 Apr 2013, 01:19 PM
Just wanted to say thanks, Dimo. That is exactly what I needed as well, and it works perfectly. Thanks!