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>

而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");    

});

代码的这是一个jsFiddle。您可以看到，我使用了jsFiddle的echo特性来模拟返回相关数据的Ajax调用。

有KendoUi忍者准备迎接挑战吗？

Answer 1

你想要做什么还不完全清楚，但有几个问题。

首先，Kendo 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小部件创建一个模板，但是该模板被应用于multiselect (数据源中的每个项)中的每个可选项。您指定的模板将创建一个新的<select>元素，这将导致MultiSelect小部件打开到另一系列选中的下拉框中。

你想做这样的事吗？http://jsfiddle.net/2GDSv/1/