I saw some examples using Kendo UI autocomplete text box with templates.
http://demos.kendoui.com/web/autocomplete/template.htmlHowever I could not find an example that uses templates on auto completion usingkendo.observable
My approach is that I use MVVM observable to binds the data to an input box as below.
<div id="form-container">
<h2>
Advisors</h2>
Select Advisor:
<div class="autocomplete">
<input id="div-template" data-role="autocomplete" data-text-field="AdvisorName" data-filter="contains" data-bind="source: advisorsSource, value: selectedAdvisor" />
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var viewModel = kendo.observable({
advisorsSource: new kendo.data.DataSource({
minLength: 2,
template: '<tr>' +
'<td>${ AdvisorCode }</dt><td>${ AdvisorName }</td><td>${ Organisation }</td>' +
'</tr>',
transport: {
type: "json",
serverFiltering: true,
read: "Home/Advisors",
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
return {
prefix: options.filter.filters[0].value
};
}
},
schema: {
model: { id: "AdvisorCode" }
}
})
});
kendo.bind($("#form-container"), viewModel);
})
</script>
MVC Action:
public JsonResult Advisors(string prefix) {
var list = new List<Advisor>()
{
new Advisor { AdvisorCode = 002, AdvisorName = "Alex" , Organisation = "Blue Co"},
new Advisor { AdvisorCode = 003, AdvisorName = "Foo" , Organisation = "Yellow Co"},
new Advisor { AdvisorCode = 004, AdvisorName = "Smith", Organisation = "Green Co" },
new Advisor { AdvisorCode = 005, AdvisorName = "David", Organisation = "Yellow Co" },
new Advisor { AdvisorCode = 006, AdvisorName = "Alex" , Organisation = "Blue Co"},
new Advisor { AdvisorCode = 007, AdvisorName = "Foo" , Organisation = "Yellow Co"},
new Advisor { AdvisorCode = 008, AdvisorName = "Smith", Organisation = "Green Co" },
new Advisor { AdvisorCode = 009, AdvisorName = "David", Organisation = "Yellow Co" }
};
return Json(list, JsonRequestBehavior.AllowGet);
}
The auto completion works ok. However it only shows AdvisorName. It seems like my template does not work. I need to display multi-column (AdvisorCode, AdvisorName, Organisation) in the drop down, and the search should be based on any of these columns ( not just the AdvisorName). Can you please advise me on how to use the template and make the search based on multiple columns?
King Regards,
Raj
1 Answer, 1 is accepted
Rank 1
You're very close. The template doesn't go on the DataSource when you are using Declarative Initialization like this. Put it in a script block with an id that you choose and a type of text/x-kendo-templ.
<script id="template" type="text/x-kendo-templ"> <tr> <td>${ AdvisorCode }</dt><td>${ AdvisorName }</td><td>${ Organisation }</td> </tr></script><input id="div-template" data-role="autocomplete" data-template="template" data-text-field="AdvisorName" data-filter="contains" data-bind="source: advisorsSource, value: selectedAdvisor" />