Strange behavior inside tbody - combobox won't open

2 posts, 0 answers
  1. sta
    sta avatar
    34 posts
    Member since:
    Mar 2011

    Posted 05 Apr 2013 Link to this post

    HI Guys,
    I experience very strange behavior of kendo combobox:
    I have a view that accepts certain model that has IList<Item> Items { get; set; } in it.
    I use knockout binding for variable length lists, which you can see in data-bind portion.
    However combobox is not currently bound to anything, just trying to make it work with simplest possible scenario.

    The following code basically causes combobox not to open (it just ignores clicking on the arrow and not showing selection options). You can type in but selection options aren't shown no matter what.
    <table>
      <tbody data-bind="foreach: Items">
    <tr>
     <td>
    @(Html.Kendo().ComboBox()
     .Name("size")
     .Placeholder("Select size...")
     .BindTo(new List<string>() { "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" })
     .SelectedIndex(3)
     .Suggest(true))
     </td>
    </tr>
      </tbody>
    </table>

    As soon as I remove the entire combobox statement from within the <td> (even between <tr> and <td> or outside the table - it works as expected - shows selection options and you can select them, but not inside the <td> - typing works, but selection doesn't.

    Can you please help!
    Thank you very much in advance.
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 09 Apr 2013 Link to this post

    Hello,

    The element that is added by the binding will not be initialized as combobox. The combobox will be initially initialized but after that the binding will set the row HTML without initializing the widget. You should either use a post-processing event or a custom binding to initialize the combobox via JavaScript after the HTML has been added.

    <table>
        <tbody data-bind="foreach: {data: items, afterRender: initComob}">
            <tr>
                <td>
                    <input type="text" class="combo"/>             
                </td>
            </tr>
        </tbody>
    </table>
    ko.applyBindings({
            items: [..],
            initComob: function (elements, item) {
                $(elements).find(".combo").kendoComboBox({
                    dataSource: ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"],
                    index: 3,
                    placeholder: "Select size...",
                    suggest: true
                });
            }
        });
    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top