Template edit box with a template

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

    Posted 05 Feb 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>
          </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

     

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 09 Feb 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>
        <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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. James
    James avatar
    9 posts
    Member since:
    Feb 2016

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

    Amazing, thank you!
Back to Top