How to place an editor into Custom Edit Template

[Jon]

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>

[Vladimir Iliev]

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:

• MVVM Overview

Regards,
Vladimir Iliev
Telerik

 

 

[Jon]

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

[Vladimir Iliev]

Hi Jon,

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

• Editor: MVVM demo

Regards,
Vladimir Iliev
Telerik

 

 

[Jon]

Thanks for your help.

[Binh]

It works. However, I would like to have a full Editor with all tools or at least include ViewHtml tool button. Is it possible? Thanks

[Veselin Tsvetanov]

Hello Binh,

Yes, that is possible. Simply add the viewHtml tool to the data-tools list. Here is a Dojo sample demonstrating that scenario:

https://dojo.telerik.com/uBaJahok

Regards,
Veselin Tsvetanov
Progress Telerik