0

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

});

これがそのコードの jsFiddleです。jsFiddleのエコー機能を使用して、関連データを返す Ajax 呼び出しをモックアップしたことがわかります。

挑戦したい剣道忍者はいますか？

4

1 に答える 1

2

何をしようとしているのかは完全には明らかではありませんが、いくつかの問題があります。

まず、Kendo DataSource は単一のアイテムではなく、データの配列を取る必要があるため、このコードは正しくありません:

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

これは配列を返すか、schema.data = "json.dataForTemplate"json.dataForTemplateを指定して、返されたオブジェクトのフィールドからデータの配列をプルするように DataSource に指示します。ただ行う方が簡単ですが：

        parse: function (response) {   
            return dataForTemplate;
        }

次に、複数選択ウィジェット全体のテンプレートを作成しようとしているように見えますが、テンプレートは複数選択内の選択可能な各項目 (データソース内の各項目) に適用されます。指定したテンプレートは新しい<select>要素を作成します。これにより、MultiSelect ウィジェットが別の一連の選択ドロップダウン ボックスに開かれます。

このようなことをしようとしていますか？http://jsfiddle.net/2GDSv/1/

于 2013-07-21T18:40:18.257 に答える