KendoUi MultiSelect ItemTemplate

Question

我一直在試圖獲取在MultiSelect控件中工作的模板材料（ItemTemplate等）。在高層次上，我想在加載頁面時加載MultiSelect，並且希望能夠更新它。

我有一些非常簡單的HTML：

<script type="text/x-kendo-template" id="members-template"> 

    <select multiple="multiple"> 
     # for (var j = 0; j < Members.length; j++) { # 
       <option selected value=' + Members.length + '>'HI'</option> 

     # } # 
    </select> 
</script> 

<div id="TeeOffTimes"></div> 

和JavaScript是：

var memberData =[ 
{ 
    "Id": 1, 
    "FirstName": "Lorenzo", 
    "LastName": "Lamas", 
    "Gender": "M", 
    "Handicap": 72, 
    "Discount": 0, 
    "CartId": null, 
    "Email": null, 
    "Cart": null, 
    "Lockers": [], 
    "MemberAddresses": [], 
    "MemberCarts": [], 
    "MemberLockers": [], 
    "MemberTeeOffs": [] 
}, 
{ 
    "Id": 2, 
    "FirstName": "Harry", 
    "LastName": "Burgess", 
    "Gender": "M", 
    "Handicap": 68, 
    "Discount": 0, 
    "CartId": null, 
    "Email": null, 
    "Cart": null, 
    "Lockers": [], 
    "MemberAddresses": [], 
    "MemberCarts": [], 
    "MemberLockers": [], 
    "MemberTeeOffs": [] 
}, 
{ 
    "Id": 3, 
    "FirstName": "Paul", 
    "LastName": "Stevens", 
    "Gender": "M", 
    "Handicap": 78, 
    "Discount": 0, 
    "CartId": null, 
    "Email": null, 
    "Cart": null, 
    "Lockers": [], 
    "MemberAddresses": [], 
    "MemberCarts": [], 
    "MemberLockers": [], 
    "MemberTeeOffs": [] 
}, 
{ 
    "Id": 4, 
    "FirstName": "Ben", 
    "LastName": "Crossen", 
    "Gender": "M", 
    "Handicap": 82, 
    "Discount": 0, 
    "CartId": null, 
    "Email": null, 
    "Cart": null, 
    "Lockers": [], 
    "MemberAddresses": [], 
    "MemberCarts": [], 
    "MemberLockers": [], 
    "MemberTeeOffs": [] 
} 
]; 

$(function() { 

$('#TeeOffTimes').kendoMultiSelect({ 
    placeholder: "Select members...", 
    autoBind: false, 
    dataSource: { 
     type: "json", 
     serverFiltering: true, 
     transport: { 
      read: { 
       url: '/echo/json/', 
       type: 'GET' 
      } 
     }, 
     schema: { 

      parse: function (response) {      
       var dataForTemplate = { Members: JSON.stringify(memberData) };      
       return { json: dataForTemplate }; 
      } 
     } 
    }, 
    itemTemplate: $("#members-template").html() 
}).data("kendoMultiSelect");  

}); 

代碼的Here is a jsFiddle。您可以看到我已使用jsFiddle的echo功能來模擬返回相關數據的Ajax調用。

任何KendoUi ninjas的挑戰？

Answer 1

這是不完全清楚你想要做什麼，但有幾個問題。

首先，劍道數據源需要採取數據，而不是單個項目的數組，所以這段代碼是不正確的：

 parse: function (response) {      
      var dataForTemplate = { Members: JSON.stringify(memberData) };      
      return { json: dataForTemplate }; 
     } 

這應該返回一個數組，或者也可以指定schema.data = "json.dataForTemplate"告訴的數據源從返回對象的json.dataForTemplate字段中抽取數據數組。雖然它會更容易只是做：

 parse: function (response) { 
      return dataForTemplate; 
     } 

其次，它看起來像你正試圖使整個多選控件模板，但模板應用到每個選擇的項目而多選（在每個項目中數據源）。您指定的模板創建一個新的<select>元素，這會導致MultiSelect小部件打開到另一系列選擇下拉框。

你想要做這樣的事嗎？ http://jsfiddle.net/2GDSv/1/