KendoUi MultiSelect ItemTemplate

Question

Я пытаюсь получить шаблонный материал (ItemTemplate и т. Д.), Работающий в элементе управления MultiSelect. На высоком уровне я хочу загрузить 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> 

И браузер:

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 этого кода. Вы можете видеть, что я использовал функцию echo функции jsFiddle для макета вызова Ajax, который возвращает соответствующие данные.

Любой ниндзя KendoUi подходит к проблеме?

Answer 1

Не совсем понятно, что вы пытаетесь сделать, но есть пара проблем.

Во-первых, Кендо DataSource необходимо принять массив данных, а не один элемент, так что этот код неверен:

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

Это должно возвращать массив, или же указать schema.data = "json.dataForTemplate" сказать DataSource в вытащите массив данных из поля json.dataForTemplate возвращаемого объекта. Хотя было бы проще просто сделать:

 parse: function (response) { 
      return dataForTemplate; 
     } 

Во-вторых, похоже, что вы пытаетесь сделать шаблон для всего MULTISELECT виджета, но шаблон применяется для каждого выбираемого элемента внутри множественного выбора (каждый пункт в источник данных). Указанный шаблон создает новый элемент <select>, что приведет к тому, что виджет MultiSelect распадается на другую серию выделенных выпадающих списков.

Вы пытаетесь сделать что-то подобное? http://jsfiddle.net/2GDSv/1/