This is a migrated thread and some comments may be shown as answers.

Strange behavior inside tbody - combobox won't open

1 Answer 95 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
sta
Top achievements
Rank 1
sta asked on 05 Apr 2013, 12:09 PM
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.

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 09 Apr 2013, 10:55 AM
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!
Tags
ComboBox
Asked by
sta
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or