This is a migrated thread and some comments may be shown as answers.
How to place an editor into Custom Edit Template
6 Answers 40 Views
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 14 Jun 2016, 11:27 AM

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>

6 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 16 Jun 2016, 07:32 AM
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.
 
0
Jon
Top achievements
Rank 1
answered on 17 Jun 2016, 11:30 AM

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

0
Accepted
Vladimir Iliev
Telerik team
answered on 21 Jun 2016, 06:35 AM
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.
 
0
Jon
Top achievements
Rank 1
answered on 21 Jun 2016, 08:00 AM
Thanks for your help.
0
Binh
Top achievements
Rank 1
answered on 04 Mar 2021, 03:21 PM
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
0
Veselin Tsvetanov
Telerik team
answered on 08 Mar 2021, 09:16 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Asked by
Jon
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Jon
Top achievements
Rank 1
Binh
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or