Dropdown list without ellipsis or wrapping

[Tonny]

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!

[Dimo]

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

[Tonny]

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

[Kasey]

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:

// 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 model

kendo.bind($("#view"), viewModel); // the drop-down is inside "#view"

[Tom]

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)

[Jeff]

Just wanted to say thanks, Dimo.  That is exactly what I needed as well, and it works perfectly.   Thanks!