This is a migrated thread and some comments may be shown as answers.

Multiple editors using toolbar custom template issue

4 Answers 62 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 25 Jan 2019, 10:39 PM

I have a view where I am dynamically adding a number of textareas when the view loads.

I am then creating an editor out of all them by applying: $(".im_editor").kendoEditor({  ...

This is working fine, but next I need to add several dropdowns to the toolbars to insert html from several different categories.

It was quickly apparent that the "insertHtml" tool would not work as it can only be used once per editor (although does function in each of the rendered editors).

Next I tried using the "customTemplate" tool following the example on the Demos page.

This works fine on the first rendered editor, but does not render properly or function on the remaining editors.

Can someone provide assistance on how to accomplish this?  

 

@foreach(var sec in Model.Sections)
{
    <div class="internalapproval_investmemo_sectitle">@sec.SectionName</div>
    <table sectionid="@sec.SectionID">
        @foreach(var entry in Model.Entries.Where(e => e.SectionID == sec.SectionID).OrderBy(e => e.EntrySeqNo))
        {
            <tr>
                <td entryid="@(sec.SectionID.ToString() + "_" + entry.EntryID)">
                    <textarea id="@sec.TextAreaName" name="@("sec" + sec.SectionID.ToString())" class="im_editor" style="height:150px;">@(HttpUtility.HtmlDecode(entry.EntryText))</textarea>
                </td>
            </tr>
        }                                        
    </table>
}

<script type="text/x-kendo-template" id="insertToken-template">
    <select id='insertTokens' style='width:110px'>
        <option value=''>Insert token</option>
        <option value='{token: dealname}'>Deal Name</option>
        <option value='{token: dealtype}'>Deal Type</option>
        <option value='{token: sectortype}'>Sector Type</option>
    </select>
</script>

<script>   

    $(document).ready(function () {

        $(".im_editor").kendoEditor({
            resizable: { content: true },
            tools: [
                "bold",
                "italic",
                "underline",
                { name: "insertHtml",
                    items: [
                        { text: "token: UPB", value: "{token: upb}" },
                        { text: "token: Investment", value: "{token: investment}" }
                    ]
                },
                {
                    name: "customTemplate",
                    template: $("#insertToken-template").html()
                }
            ]
        });

        $("#insertTokens").kendoDropDownList({
            change: function (e) {
                var editor = $(".im_editor").data("kendoEditor");
                editor.exec("inserthtml", { value: e.sender.value() });
                console.log("change fired");
            }
        });

    });
</script>

4 Answers, 1 is accepted

Sort by
0
Sam
Top achievements
Rank 1
answered on 25 Jan 2019, 10:44 PM
Here is a screenshot of the situation.  Notice "Insert Token" toolbar dropdownlist only rendered and functional on first editor.
0
Sam
Top achievements
Rank 1
answered on 25 Jan 2019, 10:46 PM
Here is a screenshot of the view showing the multiple editors where the "Insert token" custom template only renders and functions correctly on the first editor.
0
Nencho
Telerik team
answered on 29 Jan 2019, 12:32 PM
Hello Sam,

I am pasting the response that you've received in the private communication so that others can benefit if face similar scenario:

The reason for the experienced issue is that the demonstrated code snippet initializes multiple DropDownLists on the same ID, which is declared in the template. Once the loop crates 6 different select elements with the same id, the script for DropDownList initialization find only the first element (expected jquery select behaviour), hence only the first widget is initialized.

In order to avoid this, I would suggest to initialize the dropdownlists by class and remote the id attributes from the select element's declaration. Hence, you will achieve the proper behaviour. In addition to this, you would need to ensure that the correct Editor's reference is acquired in the change event of the dropdownlist. With the current implementation in the handlers, the first Editor will always have its command executed. regardless of which DropDownList selected item is changed.

consider the below:

change: function (e) {
    var tr = e.sender.element.parents("tr").eq(1);
    var editor =  tr.find("textarea").getKendoEditor();             
    editor.exec("inserthtml", { value: e.sender.value() });
}

In the attachment you can find the modified code snippet, containing the suggested approach:

Regards,
Nencho
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nencho
Telerik team
answered on 29 Jan 2019, 12:32 PM
Hello Sam,

I am pasting the response that you've received in the private communication so that others can benefit if face similar scenario:

The reason for the experienced issue is that the demonstrated code snippet initializes multiple DropDownLists on the same ID, which is declared in the template. Once the loop crates 6 different select elements with the same id, the script for DropDownList initialization find only the first element (expected jquery select behaviour), hence only the first widget is initialized.

In order to avoid this, I would suggest to initialize the dropdownlists by class and remote the id attributes from the select element's declaration. Hence, you will achieve the proper behaviour. In addition to this, you would need to ensure that the correct Editor's reference is acquired in the change event of the dropdownlist. With the current implementation in the handlers, the first Editor will always have its command executed. regardless of which DropDownList selected item is changed.

consider the below:

change: function (e) {
    var tr = e.sender.element.parents("tr").eq(1);
    var editor =  tr.find("textarea").getKendoEditor();             
    editor.exec("inserthtml", { value: e.sender.value() });
}

In the attachment you can find the modified code snippet, containing the suggested approach:

Regards,
Nencho
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Editor
Asked by
Sam
Top achievements
Rank 1
Answers by
Sam
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or