KendoUi MultiSelect ItemTemplate

Question

I've been trying to get the templating stuff (ItemTemplate etc) working in the MultiSelect control. At a high level, I want to load a MultiSelect when the page loads and I want to be able to update it.

I have some very simple 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>

And the javascript is:

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 of that code. You can see I have used the echo feature of jsFiddle to mock up an Ajax call that returns relevant data.

Any KendoUi ninjas up for a challenge?

CodingWithSpike CodingWithSpike · Accepted Answer · 2013-07-21T18:40:18

It isn't completely clear what you are trying to do, but there are a couple problems.

First, a Kendo DataSource needs to take an array of data, not a single item, so this code is incorrect:

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

That should return an array, or also specify schema.data = "json.dataForTemplate" to tell the DataSource to pull the array of data from the json.dataForTemplate field of the returned object. Though it would be easier to just do:

        parse: function (response) {   
            return dataForTemplate;
        }

Second, it looks like you are trying to make a template for the entire multiselect widget, but the template is applied to each selectable item inside the multiselect (each item in the datasource). The template you specified creates a new <select> element, which would cause the MultiSelect widget to drop open to another series of select dropdown boxes.

Are you trying to do something like this? http://jsfiddle.net/2GDSv/1/

KendoUi MultiSelect ItemTemplate

1 Answers