Template edit box with a template

3 posts, 0 answers
  1. James
    James avatar
    9 posts
    Member since:
    Feb 2016

    Posted 05 Feb 2016 Link to this post

    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 builidng a custom edit box for the scheduler.


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


    Can someone please explain 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>



    $("#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


  2. Vladimir Iliev
    Vladimir Iliev avatar
    2190 posts

    Posted 09 Feb 2016 Link to this post

    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>
        jQuery(function() {
            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:*/

    Vladimir Iliev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. James
    James avatar
    9 posts
    Member since:
    Feb 2016

    Posted 09 Feb 2016 in reply to Vladimir Iliev Link to this post

    Amazing, thank you!
Back to Top