我是Kendo UI的新手,仍然学习很多。我的要求是创建一个多列自动完成下拉列表。我使用带有模板的Kendo UI自动填充文本框跟随下面的链接。 http://demos.kendoui.com/web/autocomplete/template.html。如何使用MVVM可观察到的Kendo UI自动完成模板
但是我无法找到使用模板使用自动完成的例子..
kendo.observable。
我使用MVVM observable将数据绑定到输入框,如下所示。
<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>
的HomeController有其返回JSON如下操作:
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"},
};
return Json(list, JsonRequestBehavior.AllowGet);
}
自动完成工程确定。但它只显示AdvisorName。看起来像我的模板不能按预期工作。
我需要在下拉列表中显示多列(AdvisorCode | AdvisorName | Organization),并且搜索应基于任何这些列(而不仅仅是AdvisorName)。
任何人都可以请我指出正确的方向如何使用模板,所以我可以显示多列?
非常感谢,非常感谢。