I updated an MVC4 project I have been working on to use the the new IgniteUI 2013.2 release. Since then I have been unable to display a value set via javascript within elements utilizing igTextEditor. The odd thing is I can actually see the value of the igTextEditor using .igEditor("value") while debugging, but it just doesn't display in igTextEditor.
For example:
I have a scenario where I use data from a selected row in an iGrid to populate a form within an igDialog prior to opening the dialog itself. However, when using igEditor or .val methods, nothing displays nor do I see a value set for the element when I inspect the element in Google Chrome.
1. Visual of scenario
2. Code used to set 'First Name' field.
$("#formEditPrimaryFamilyMember input[id='FirstName']").igEditor("value", selectedRowDataView.DictionaryMember.FirstName);
3. Value of 'First Name' igTextEditor as seen via dev tools in Google Chrome after execution of line of code above:
The above code worked flawlessly in 2013.1 and I can't puzzle out why the JavaScript set values are no longer displaying even though I can demonstrate the values can be retrieved and set via igEditor("value"). I will include some of the relevant code files within an archive that I will attach to this post.
Any help would be appreciated.
Hello Kristopher,
Thank you for posting in our community!
Could you please attach a project with the solution file which could be directly launched?
Looking forwards to hearing from you.
Hi, Dimka
Thank you for the quick response.
The project this problem originates in is quite large, I'll see about coming up with a smaller project with the just the controller and view in question and attach it in a later post.
As a side note let me make a clarification: I have other dialogs in different views within the same project that use nearly identical code to open them and set igTextEditor values; the igTextEditors for those display perfectly. The only real differences between those dialogs and this one are different field names and the dialog in question populates its data from an igGrid that makes use of a rowtemplate.
I believe I know whats going wrong and have a way to workaround it where the igTextEditor will now display the set value. However, the problem looks more to be a difference between jquery 1.8 and jquery 1.9 that ignite ui now uses rather than a problem with ignite ui itself.
In order to resize my igDialogs to their content I use the following script method:
// --- resizeDialogToContents ------------------------------------------------------------------------- /// <summary> Will resize specified dialog window to appropriately fit its content. </summary> /// <param name="formName" type="String"> The name of the dialog to size. </param> // ---------------------------------------------------------------------------------------------------- resizeDialogToContents = function (dialogsDivId, offsetWidth, offsetHeight) { $('body').append('<div id="hiddenDialogSizer" style="display:none;">' + $("#" + dialogsDivId).html() + '</div>');
$("#" + dialogsDivId).igDialog("option", "width", $("#hiddenDialogSizer").width() + offsetWidth); $("#" + dialogsDivId).igDialog("option", "height", $("#hiddenDialogSizer").height() + offsetHeight);
$("#hiddenDialogSizer").remove();
$("#" + dialogsDivId).igDialog({ position: { my: "center", at: "center", of: window } });
} //end resizeDialogToContents
In my method I use the jQuery append method. For whatever reason, in jQuery 1.9, that append method seems to be re-calling the loader script for the igTextEditor. So if I set the values for each igTextEditor before I called my resize method the append method would essentially wipe out the set values.
Ergo, from now if I need to append something to a dialog and set values I need to be sure to set the values after the append.
Eh, sorry for the trouble and thank you for listening to me puzzle out my problem using your forum.
Thank you for your posts.
I am glad that you have found solution for this issue. If any new questions regarding this scenario arise feel free to update the thread.