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 | Organization) を表示する必要があり、検索はこれらの列のいずれかに基づく必要があります (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="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 に答える