如何使用MVVM可觀察到的Kendo UI自動完成模板

我是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）。

任何人都可以請我指出正確的方向如何使用模板，所以我可以顯示多列？

非常感謝，非常感謝。

來源

2012-10-13 Spock

得到它的工作！一旦我將模板屬性移動到輸入字段，它就會起作用。例如，請參閱下文。

<input id="advisorautocomp" data-role="autocomplete" 
data-text-field="Name" data-filter="contains" 
     data-bind="source: advisorsSource, value: selectedAdvisor" 
     data-template="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 forum上發佈了相同的問題，希望他們能有一個完整的答案。

來源

2012-10-14 02:53:58 Spock

如何使用MVVM可觀察到的Kendo UI自動完成模板

回答

相關問題