How can I change the Editor template.

Tester2017

I use DataTables and Editor with the Bootstrap3 extension.

Everything is working, but I have one issue in trying to change the editor template on the fly.

As the documentation, it is possible to change the template. But it is also recommended to restore the original one after. That part is working.

If a want to edit a whole row, custom template-1 is used, but I offer the option to change a memo-field and then I would like to use template-2.

Both template-1 and template-2 are in the HTML file defined.

What is happening?
1. Editing a row, template-1 is used and everything is ok.
2. If I want to edit a memo-field a model is opened but not showing the memo field.
3. If I omit template-2 for the editing of the memo-field, template-1 is opened and working OK. But I would like to use template-2.

This is the part where I try to use template-2:

$(`#groups`).on(`click`, `tbody td`, function(e)
{
    if ($(this).index() == 4)                           //  memo-field
    {
        editorTemplate = editor.template();             //  Save original Editor template (= template-1). We need to restore it after.

        editor.one(`open`, function(e, mode, action)
        {
            editor.template(editorTemplate);            //  Restore the template allready here.
        }),

        editor
            .template(`customFormMemo`)                 //  This template-2

            .title(langEditor.edit[`title`])
            .buttons(
                [
                    {label: langEditor.edit[`submit`], className: `btn-primary`, fn: function(){this.submit()}},
                    {label: langCustom.cancel_btn, className: `btn-primary`, fn: function(){this.close()}}
                ])
            .edit(this);
    }
});

And this is a fragment of the HTML part:

    <div id="customFormMemo" class="hidden">
        <div data-editor-template="groups.memo"></div>
    </div>
    <div id="customForm" class="hidden">
        <ul class="nav nav-tabs">
            <li id="tab-1-li" class="active"><a id="tab-1" data-toggle="tab" href="#tab1"><?php echo lang('tab_name_and_position'); ?></a></li>
            <li id="tab-2-li"><a id="tab-2" data-toggle="tab" href="#tab2"><?php echo lang('tab_image'); ?></a></li>
            <li id="tab-3-li"><a id="tab-3" data-toggle="tab" href="#tab3"><?php echo lang('tab_memo'); ?></a></li>
        </ul>
        <div id="tab-content" class="tab-content">
            <div id="tab1" class="tab-pane fade in active">
                <div data-editor-template="groups_lc.name"></div>
                <div data-editor-template="groups.sequence"></div>
                <div data-editor-template="groups.show_this"></div>
            </div>
            <div id="tab2" class="tab-pane fade">
                <div data-editor-template="groups.image"></div>
            </div>
            <div id="tab3" class="tab-pane fade">
                <div id="memo" data-editor-template="groups.memo"></div>
                <h6 id="count_message" class= "pull-right"></h6>
            </div>
        </div>
    </div>

In the DOM both template-1 and template-2 are present.

For sure I am missing something, but I could not find an answer in the documentation.

allan

This:

template(customFormMemo)

Should be:

template(`#customFormMemo`) 

note the hash to make it an id selector. Otherwise it is trying to select an element by the name of <customFormMemo>.

More generally I would actually suggest using:

var customFormMemo = $('#customFormMemo');
var customForm = $('#customForm');

before your click event handler so that you have a reference to them permanently stored. Then you can simply do editor.template( customFormMemo ) or editor.template( customForm ) as you require.

Allan

allan

I should also say that another option is to have two Editor instances - one configured for each template and you simply activate the editing on the one you want.

Allan

Tester2017

@allan Thanks again Allan!