Proper way to use a Knockout template in a Kendo UI Autocomplete control using Knockout-Kendo

0
votes

I'm using Kendo UI (latest version) with Knockout-Kendo (0.6.3) and Knockout (2.3.0) and I have a complex situation with an autocomplete where I am attempting to map the input typed into the autocomplete field (a numeric string) to a complex data type on the backend in Javascript.

I don't think all the details are relevant at this point as my problem is understanding how to properly use a named Knockout template with any Kendo UI control other than a grid (because I have that one working). Essentially I'm trying to style the autocomplete suggestion dropdown based on the the input entered into the autocomplete.

Essentially I've tried this:

<input data-bind="kendoAutoComplete: { data: paymentSubCodeCodeList, value: paymentSubCodeCode, template: { name: 'mail_mailPaymentEntry-section_subcode-autocomplete', data: paymentSubCodeCode } }" />

but this locks up and throws a javascript knockout error saying object does not support "replace".

I've also tried

template: $('#mail_mailPaymentEntry-section_subcode-autocomplete').html()

and

template: '<div>#: data #</div>'

The first one works to create a template but I cannot access any knockout data. The second one works with data but data is just the value I selected and I need access to associated ViewModel.

Make sense?

2
knockout.jskendo-ui

2 Answers

0
votes

I'm not sure if knockout-kendo supports knockout templates for things other than the grid.

You can write a custom binding which renders a template however

ko.bindingHandlers.myBinding = {
    update: function(element, valueAccessor, allBindingsAccessor) {
        var accessor = valueAccessor();
    //do cool stuff
        ko.renderTemplate("myTemplate", accessor, {}, element, 'replaceNode');
    }
};

If a kendo template will due here's an example using them:

http://jsfiddle.net/GQqwY/72/

var ViewModel = function() {

this.choices = ko.observableArray([{ Id: 1, Name: 'Andrew' },{ Id: 2, Name: 'John' }, { Id: 3, Name: 'Doe' }]);

this.selectedChoice = ko.observable();

this.templ = kendo.template('<div style="color:blue">#= Name #</div>');

};

ko.applyBindings(new ViewModel());

0
votes

Knockout will accept all options that you give it on the actual widget.

You can include a template option like :

<input data-bind="kendoDropDownList: { dataTextField: 'name', dataValueField: 'id', data: choices, value: selectedChoice, template: '<span>Name: #: data.name # </span>' }" />

Here is an example from Niemeyer : http://jsfiddle.net/rniemeyer/jgs9H/