EJ2 - Avoiding Duplicate Control Names

[Randy Craven]

Hello,

With EJ1 it was important to avoid duplicate control names on a page.  This was easily done by creating a variable and assigning it as the id of the html element hosting the control:

            $('#' + '@editorID').ejRTE({

              (config options here)

            });

With the EJ2 online sample code the control is instantiated as a variable and it would appear that a dynamic variable name is required.  Here is one way that works for me but requires using eval:

            eval('var ' + '@editorObjId');

            window['@editorObjId'] = new ej.inplaceeditor.InPlaceEditor({

                (config options here)

           });

            eval('@editorObjId' + '.appendTo(' + '@captionEditorId' + ')');

I would like to know, what is the best practice when multiple instances of the same control need to be hosted on the same page?

Thank You,

Randy Craven

[Indrajith Srinivasan]

Hi Randy, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. We are not clear with the exact requirement with the shared information. Based on our understanding, we have prepared a sample maintaining multiple instances on the In-place editor control with different button clicks.  

 

Sample: https://stackblitz.com/edit/1rgv73-rknopj?file=index.js 

 

Can you please check the above sample and let us know if it meets your requirements? 

 

If not, can you please share us the following details, 

 

• The platform you are using EJ2 (Asp.Net MVC, JavaScript or any other platforms) ?
• Are you using ajax call for showing the In-place editor component?
• Can you please share us the code blocks of the In-place editor rendering part ?

 

The above details will be helpful for us to validate and provide solution at earliest. 

 

Regards, 

Indrajith 

[Randy Craven]

Hello Indrajith,

Thank you for responding, and I'm sorry it has taken a few days for me to reply back.

Consider a scenario like the one in your sample code, but, each In Place Editor needs to be active at the same time.

The attached code will load up three In Place Editor controls simultaneously, so that each one can be edited at the same time.

My question is: Can you suggest a better way to do this, in particular, a solution that does not use the eval function?

Thank You,

Randy Craven

        function initControls(){

            var numberOfEditorControls = 3

            var controlId;

            var objectId;

            var container;

            var control;

            container = document.querySelector('#controlsContainer');

            for(var i=1; i<=numberOfEditorControls; i++){

                objectId = 'object' + i;

                controlId = 'control' + i;

                container.innerHTML += '<div id="' + controlId + '"></div>';

                eval('var ' + objectId);

                window[objectId] = new ej.inplaceeditor.InPlaceEditor({

                    value: 'in place editor ' + i

                });

                control = document.querySelector('#' + controlId);

                window[objectId].appendTo(control);

            };

        }

Attachment: main_bc469b05.zip

[Revanth Krishnan]

Hi Randy, 

 

 

Good day to you. 

 

 

We have validated your query “To load three In-place Editor simultaneously to edit at the same time with using eval function when rendering”. 

Many In-Place Editor can be rendered using for loop without using eval function, We have prepared a sample using the code shared by you, 

 

Code Snippet: 

 

document.getElementById('show').addEventListener('click', function () { 

    var inplaceControls = 3; 

    var controlID; 

    var container = document.querySelector('#controlSection'); 

    for(var i=1; i <= inplaceControls; i++){ 

      var renderElement = document.createElement('div'); 

      renderElement.setAttribute('id', "inplace-number-" + i); 

      container.appendChild(renderElement); 

      var editObj = "editObj" + i; 

      window[editObj] = new ej.inplaceeditor.InPlaceEditor({ 

        type: "Text", 

        value: "Inplace value" 

      }); 

      window[editObj].appendTo("#inplace-number-" + i); 

    } 

}); 

 

Sample: https://stackblitz.com/edit/1rgv73-jpyhdv?file=index.js 

 

Please refer the above code snippet and the sample and the let us know if it satisfy your requirement. 

 

Regards, 

Revanth