title: KendoUi MultiSelect ItemTemplate
body: <p>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.</p>
  
  <p>I have some very simple html:</p>
  
  <pre><code>&lt;script type="text/x-kendo-template" id="members-template"&gt;
  
      &lt;select multiple="multiple"&gt;
          # for (var j = 0; j &lt; Members.length; j++) { #
                  &lt;option selected value=' + Members.length + '&gt;'HI'&lt;/option&gt;
  
          # } #
      &lt;/select&gt;
  &lt;/script&gt;
  
  &lt;div id="TeeOffTimes"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the javascript is:</p>
  
  <pre><code>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");    
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/davidalanrogers/2GDSv/" rel="nofollow">Here is a jsFiddle</a> of that code. You can see I have used the <em>echo</em> feature of jsFiddle to mock up an Ajax call that returns relevant data.</p>
  
  <p>Any KendoUi ninjas up for a challenge?</p>