This is a migrated thread and some comments may be shown as answers.

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

1 Answer 482 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Raj
Top achievements
Rank 1
Raj asked on 13 Oct 2012, 10:19 AM
I saw some examples using Kendo UI autocomplete text box with templates. 
http://demos.kendoui.com/web/autocomplete/template.html
However I could not find an example that uses templates on auto completion using
kendo.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

Sort by
0
Burke
Top achievements
Rank 1
answered on 30 Nov 2012, 05:43 PM
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">
  <tr>
    <td>${ AdvisorCode }</dt><td>${ AdvisorName }</td><td>${ Organisation }</td>
  </tr>
</script>
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" />
Cheers!

Tags
AutoComplete
Asked by
Raj
Top achievements
Rank 1
Answers by
Burke
Top achievements
Rank 1
Share this question
or