Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
C J
960
Setting many different editor fields Readonly
posted

Hello,

i am trying to set some input fields on my screen readonly. I was disappointed that the native HTML attribute readonly="true" did not work, but saw I could use

$(".selector").igEditor("option", "readOnly", true);

However, some fields are igTextEditor, some are igMaskEditor, some are igNumerixEditor. etc. These controls are created via my own CSS class, so I don't have 300 separate initializations - ie :

        $(".myTextClass').igTextEditor();

        $(".myNumClass').igNumericEditor();

However only some of these are read only, so I want to add another class designating that the field is readonly ie :

        $(".myReadOnlyClass").igEditor("option", "readOnly", true);

But when I do this I get :

    Uncaught Error: cannot call methods on igEditor prior to initialization; attempted to call method 'option'

I presume this is because the fields were created as igTextEditor, igNumericEditor, etc and not igEditor. I thought igEditor would be like a 'superclass' meaning that its methods could be called on any subclass object.

Is there any 'generic' ig control name or function/method I can call on every ig control, no matter what the actual type of control it is?

Thank you

Parents
No Data
Reply
  • 10685
    Verified Answer
    Offline posted

    Hello CJ, 

    In short, it is supposed to use each editor’s instance/options in order to set the readOnly option. It could not be done like using igEditor to access and change all of the instantiated editors options at once. Thus the following will not work in the way you require:
     $(".myReadOnlyClass").igEditor("option", "readOnly", true);     

    What is more, there is no ‘generic’ method to achieve this.
    However, what you require is to use a custom function to set the readOnly option based on the actual instance type. For example, I came with the following function and implemented a sample illustrating a possible approach. 

        $("#button1").on("click", function () {
                    $(".myEditorsClass").toggleClass("myEditorsReadOnlyClass");
                            $(".myEditorsReadOnlyClass").each(function () {
                            var input = $(this);
                            var inputData = $(this).data();
                            var keys = Object.keys(inputData);
                            if (keys.length > 0) {
                                editorType = keys[0];
                                var alt = "$(this)" + "." + editorType.toString() + "('option', 'readOnly', true)";
                                eval(alt);
                            }
                        });
                }); 

    I initialize all editors with “myEditorsClass” and later on a btn click add “myEditorsReadOnlyClass” to all igEditors as well as making the editors readOnly based on their actual type. I believe this approach is appropriate for you, as you are independent of the actual containers ID’s each editor is instantiated on and use only classes.

    I am also attaching a runnable sample.
    Please let me know how my suggestions work for you.

    igEditors_SetAllEditors_ReadOnly.zip
Children