Multiple editors using toolbar custom template issue

[Rogerio]

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>

[Rogerio]

Here is a screenshot of the situation.  Notice "Insert Token" toolbar dropdownlist only rendered and functional on first editor.

[Rogerio]

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.

[Nencho]

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

[Nencho]

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