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
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);
".myReadOnlyClass"
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
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.
In reading your answer, my next question was if there was some equivalent to the Java 'instanceof' operator that would tell me what the object was that I had (what 'this' is) so that I could then call the proper method. Then I looked at and debugged your code and that is exactly what you are doing - finding the type of object via the 'keys' of the object. I can use this information to do what I need, but with 2 questions.
1) This feels like a hack in that its not using a documents API, and you (Infragistics) can change the format of the objects you create ( like keys[0] stops being the value 'of the object type). Is this documented somewhere for developers to use safely?
2) I am unsure why you suggested setting my own class name, and then using 'toggleClass' in this code. I used this code without this complication. Was there a reason for it?
$(".myReadonlyClass").each(function () {
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);
}
});
Thanks for your help.
OK, thank you for helping to fix my problem!
1) Regarding the objects asking, there is no official documentation regarding the naming. However, you could rely on the returned value to match the igEditorType when using keys[0]. The reason for this is, our widgets depend on it to function properly. If we take the igTextEditor for example when debugging the above method, you will notice two objects will be existing and included in the keys array initially. The first one is the one you require and it is "igTextEditor". The second one is autoGenerated by jquery-ui 1.9.2+ (and above versions) and it is named as "uiIgTextEditor". The second one is existing, because of a breaking change in jquery-ui naming convention and you could find more details if interested on http://jqueryui.com at:Changed naming convention for .data() keys.
These two are actually the same objects, and yet our widgets depend on the first one, as it was existing and used prior to the breaking change made in jquery-ui.
The main point here is the igTextEditor object name will not be changed and could be used to obtain the specific editor type as suggested in the above function. This also applies for all other editor types as well.
2) I am adding the additional class in my sample, in order to better illustrate and track the read-only editors as I believe this was a question in the initial asking “However only some of these are read only, so I want to add another class designating that the field is readonly ie :” So, I expected you would like to be able to have a class applied to all the read-only editors to track and modify these more easily. It is however not required and could be removed from the function. Whatever best suits your requirements.