0

我是 Kendo UI 的新手，仍然学到了很多东西。我的要求是创建一个多列自动完成下拉列表。我使用带有模板的 Kendo UI 自动完成文本框按照以下链接进行操作。 http://demos.kendoui.c​​om/web/autocomplete/template.html。

但是，我找不到使用自动完成模板的示例。

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 的 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"},   
        };

        return Json(list, JsonRequestBehavior.AllowGet);
   }

自动完成工作正常。但是它只显示 AdvisorName。我的模板似乎没有按预期工作。

我需要在下拉列表中显示多列（AdvisorCode | AdvisorName | Organisation），并且搜索应该基于这些列中的任何一个（而不仅仅是 AdvisorName）。

谁能指出我如何使用模板的正确方向，以便我可以显示多列？

谢谢，非常感谢。

4

1 回答 1

0

得到它的工作！一旦我将模板属性移动到输入字段，它就可以工作了。例如，请参见下文。

 <input id="advisorautocomp" data-role="autocomplete" 
 data-text-field="Name" data-filter="contains"
        data-bind="source: advisorsSource, value: selectedAdvisor" 
        data-template="template" />

注意：data-template="模板"

并且模板可以定义如下（仅作为示例）。

 <script id="template" type="text/x-kendo-template">      
      <tr><td>${ data.Code }</td><td>${ data.Name }</td></tr>      
 </script>

我不确定为什么 javascript 模板属性不适用于 kendo.observable，但在这个阶段，上述解决方案对我有用。我在Kendo UI 论坛上发布了同样的问题，希望他们能给出完整的答案。

于 2012-10-14T02:53:58.557 回答