CODEWITHSUNDEEP
kendo-uikendo-mvvm
noBreakingChanges
noBreakingChanges

Reputation: 603

Kendo MVVM DropDownList not behaving correctly inside Template

If I place a MVVM dropdownlist inside a kendo template, the dropdownlist;

(a) Opens in the top-left on the screen (rather than underneath the input). (b) Does not fire events

I have create a dojo. There are two identical dropdownlists, except the second is created with a template, whereas the first is not. You can see that the the second dropdownlist does not open in the correct spot, and no events are logged to the console.

Is this a bug, or is there something I've missed?

Upvotes: 2

Views: 216

Answers (1)

Leniency
Leniency

Reputation: 5024

Recommendation is to not bind the widget with 'source: this', but rather sub-property on the model: 'source: item'

http://dojo.telerik.com/UHicE/3

<div id="div2" data-bind="source: item" data-template="myTemplate"></div>

<script id="myTemplate" type="text/x-kendo-template" >
    <input data-role="dropdownlist"
           ...
           data-bind="value: selectedProduct,
                      source: products,
                      enabled: isEnabled />
</script>


var viewModel = kendo.observable({
  item:  {
    selectedProduct: null,
    isPrimitive: false,
    isEnabled: true,
    products: new kendo.data.DataSource({
      transport: {
        read: {
          dataType: "jsonp",
            url: "http://demos.telerik.com/kendo-ui/service/Products",
          }
        }
      }),
      ...
    }
  });

A bit of further testing and it appears the issue is the remote data source: http://dojo.telerik.com/elOcO

If you use a remote source, best to not use a source: this.

Upvotes: 1

Related Questions