How to use the templates for Kendo UI autocomplete using MVVM observable

2 posts, 0 answers
  1. Raj
    Raj avatar
    1 posts
    Member since:
    Sep 2010

    Posted 13 Oct 2012 Link to this post

    I saw some examples using Kendo UI autocomplete text box with templates.
    However I could not find an example that uses templates on auto completion using
    My approach is that I use MVVM observable to binds the data to an input box as below.
    <div id="form-container">
        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" />
    <script type="text/javascript">
        $(document).ready(function () {
            var viewModel = kendo.observable({
                advisorsSource: new{
                    minLength: 2,
                    template: '<tr>' +
    	                    '<td>${ AdvisorCode }</dt><td>${ AdvisorName }</td><td>${ Organisation }</td>' +
                    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);

    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,

  2. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 30 Nov 2012 Link to this post

    Hi Raj!

    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">
        <td>${ AdvisorCode }</dt><td>${ AdvisorName }</td><td>${ Organisation }</td>
    Then in your AutoComplete markup, add the data-template attribute and set it to the ID that you gave the template.  In this example, it's just template.
    <input id="div-template" data-role="autocomplete"
         data-template="template" data-text-field="AdvisorName"
         data-filter="contains" data-bind="source: advisorsSource, value: selectedAdvisor" />

Back to Top