How to place an editor into Custom Edit Template

5 posts, 1 answers
  1. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 14 Jun Link to this post

    I'm using a Custom Edit Template for my scheduler.

    I have two textareas (description & notes) that I would like to be kendo editors. Can this be achieved?

     

    <script id="customEditorTemplate" type="text/x-kendo-template">
     
        <div class="content-wrapper">
              
            <!-- code removed for brevity -->
     
            <div class="row m05">
                <div class="col-sm-2 text-right">
                    <label for="description">Activity</label>
                </div>
                <div data-container-for="description" class="col-sm-8">
                    <textarea name="description" class="k-textbox" required="required" data-bind="value:description"></textarea>
                </div>
            </div>
     
            <div class="row m05">
                <div class="col-sm-2 text-right">
                    <label for="notes">Notes</label>
                </div>
                <div data-container-for="notes" class="col-sm-8">
                    <textarea id="notes" name="notes" class="k-textbox" data-bind="value:notes"></textarea>
                </div>
            </div>
        
            <div class="row m05">
                <div class="col-sm-2 text-right">
                    <label for="recurrenceRule">Repeat</label>
                </div>
                <div data-container-for="recurrenceRule" class="col-sm-8">
                    <div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
                </div>
            </div>   
        </div>
     
    </script>
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 16 Jun Link to this post

    Hello Jon,

    You can achieve it by simply adding the "data-role" attribute to the "textarea" as demonstrated below:


    <textarea name="description" data-role="editor" class="k-textbox" data-bind="value:description"></textarea>

    For more information about the Kendo UI MVVM you can check the following help article:

    Regards,
    Vladimir Iliev
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 17 Jun in reply to Vladimir Iliev Link to this post

    Vladimir,

    Thanks... this gives me editors... just one more question. I've not found documentation on how I can customise which tools are shown. I just need Bold, Italic, Underline, Ordered List, Unordered List, Indent, Outdent, Link, Unlink and Table creator/editor.

    Thanks

  5. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 21 Jun Link to this post

    Hi Jon,

    You can check the Editor widget official MVVM demo for example of how to customize the editors:

    Regards,
    Vladimir Iliev
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 21 Jun in reply to Vladimir Iliev Link to this post

    Thanks for your help.
Back to Top
Kendo UI is VS 2017 Ready