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
$("#absStart").kendoDateTimePicker({format: "dd-MM-yyyy HH:mm", timeFormat:"HH:mm" });After selecting date or time everything is ok
renders:
11/1/2012 2:20:00 PM
$(document).ready(function () { var data =new kendo.data.DataSource({ serverFiltering: true, transport: { read: "data/output.txt" } }); $("#input").kendoAutoComplete({ dataSource: data }); });{"__entityModel":"People","__COUNT":3,"__SENT":3,"__FIRST":0,"__ENTITIES":[{"__KEY":"27","__STAMP":11,"ID":27,"firstName":"dan","lastName":"qqqq"},{"__KEY":"26","__STAMP":14,"ID":26,"firstName":"dan","lastName":"rrrr"},{"__KEY":"25","__STAMP":13,"ID":25,"firstName":"dan","lastName":"eeee"}]} $(document).ready(function () { //var crudServiceBaseUrl = "http://demos.kendoui.com/service", // var crudServiceBaseUrl = "http://127.0.0.1:8081/rest",var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://127.0.0.1:8081/rest/People", type: "POST", contentType: "application/json; charset=utf-8", dataType: "json" } }, schema: { data: function (data) { alert("got data") alert(data); /*Data Return Successfully*/ return data; } }, error: function (e) { debugger; alert("Error"); }, change: function (e) { alert("Change"); }, requestStart: function (e) { debugger; alert("Request Start"); } }); $("#grid").kendoGrid({ dataSource: dataSource, pageable: true, height: 400, toolbar: ["create"], columns: [ "firstName", "lastName", { command: ["edit", "destroy"], title: " ", width: "210px" }], editable: "inline" }); });.ClientRowTemplate("<tr>" +
"<td >" +
"${ FirstName} " +
"</td>" +
"<td> " +
"${ LastName} " +
" </td>" +
"</tr>" +
"${optionalNotes(Notes)}")function optionalNotes(t) { if (t.length > 0) { return "<tr><td colspan='2'>" + t + "</td></tr>"; } else { return ""; }}