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忍者都要挑战？

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;
        }

其次，看起来您正在尝试为整个多选小部件创建模板，但该模板将应用于多选中的每个可选项（数据源中的每个项）。您指定的模板会创建一个新的<select>元素，这会导致MultiSelect小部件打开到另一系列选择下拉框。

你正试图这样做吗？ http://jsfiddle.net/2GDSv/1/

KendoUi MultiSelect ItemTemplate

1 个答案: