Template edit box with a template

[James]

Hi Guys,

 

I'm following this example on your website http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-edit-and-event-templates about a custom edit box for the .

 

but I want to replace the existing box with a box with a custom template http://demos.telerik.com/kendo-ui/multiselect/template 

 

Can someone please me how to replace

this template  

 <div data-container-for="ownerId" class="k-edit-field">
        <select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
                        data-value-field="value" data-text-field="text">
          <option value="1">Alex</option>
          <option value="2">Bob</option>
          <option value="3">Charlie</option>
      </select>
      </div>

 

with

$("#customers").kendoMultiSelect({ dataTextField: "ContactName", dataValueField: "CustomerID", headerTemplate: '<div class="dropdown-header k-widget k-header">' +'<span>Photo</span>' +'<span>Contact info</span>' +'</div>', itemTemplate: '<span class="k-state-default" style="background-image: url(\'../content/web/Customers/#:data.CustomerID#.jpg\')"></span>' +'<span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>', tagTemplate: '<span class="selected-value" style="background-image: url(\'../content/web/Customers/#:data.CustomerID#.jpg\')"></span><span>#:data.ContactName#</span>', dataSource: { transport: { read: { dataType: "jsonp", url: "//demos.telerik.com/kendo-ui/service/Customers",}}}, height: 400});

 and make it still to work

 

thanks in advance

 

[Vladimir Iliev]

Hi James,

Please check the example below of how to achieve the desired behavior:

<div data-container-for="ownerId" class="k-edit-field">
  <select id="ownerId" data-bind="value:ownerId"></select>
    <script>
    jQuery(function() {
      jQuery(document.getElementById("ownerId")).kendoMultiSelect({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [{value:1, text: 'Alex'},{value:2, text: 'Bob'},{value:3, text: 'Charlie'}],
        /*remember to escape all nested sharp symbols with backslash:*/
        tagTemplate:  '< \#:data.text\# >',
      });
    });
        /*remember to escape nested closing script tags:*/
    <\/script>
</div>

Regards,
Vladimir Iliev
Telerik

 

 

[James]

Amazing, thank you!