0

I am using Knockout-Kendo.js to bind Kendo widgets to Knockout observables. I have a KendoListView that populates itself from html template based on a observable named "Filters". The problem I am having is that the input control that I am using inside the template is not converting into a Kendo widget, even though I am specifying it as a kendoComboBox. (I have left out properties of dataSource, etc for simplicity)

Other things to take note of.

  • On page load, there are no objects in the Filters observable property in the Model.

  • ko.ApplyBindings(Model) is called within the Document ready function.

  • Users make various selections on the page, which then populates the
    Filter observable in the model.

  • The controls do show up in DOM when Filters are added, but as native Html controls.

var Model = {

    Filters: ko.observable([]),

    FilterItemTemplate: function () {
        return kendo.template($("#FilterItemTemplate").html())
    }

}

<div id="Filters" data-bind="kendoListView: { data: Filters, template: FilterItemTemplate()}" ></div>


<script type="text/html" id="FilterItemTemplate">
        <div>
            <h4>#=ControlLabel#</h4>         
            <input id="#=ControlID#" name="FilterControl" data-bind="kendoComboBox: {}" /> 
        </div>
 </script>
DanB
  • 11
  • 2

1 Answers1

0

What I wind up doing is

  1. Removed the ListView from the Filters div.
  2. Since the ListView is now removed, i subscribed to the Filters observable in my model with my javascript code. So whenever something is loaded or removed from the Filters observable, the function listener will be invoked.
  3. Within the listener function manually created the Kendo widgets and append to the Filters div.
DanB
  • 11
  • 2