Inside an UpdatePanel, I have an ajax:ReorderList. In the ReorderList's InsertItemTemplate, I have a Panel with two RadEditors. I display the Panel in an ajax:ModalPopupExtender when the User clicks on a Button above the ReorderList.
Both RadEditors work just fine in IE versions 9 and up or in Firefox (tested versions 3.6.8, 8.0.1, 9.0.1, 27.0.1, and 28.0.1).
However, in Safari (version 4, 5, or 5.1.7) or Chrome 33, Users cannot enter Text into either RadEditor...
The generated HTML looks very similar in all browsers, a <textarea> is created, even though I have tried setting the Editors' EnableTextareaMode="false" in the markup.
Please help me figure out what I'm doing wrong...
Here is my aspx markup
Both RadEditors work just fine in IE versions 9 and up or in Firefox (tested versions 3.6.8, 8.0.1, 9.0.1, 27.0.1, and 28.0.1).
However, in Safari (version 4, 5, or 5.1.7) or Chrome 33, Users cannot enter Text into either RadEditor...
The generated HTML looks very similar in all browsers, a <textarea> is created, even though I have tried setting the Editors' EnableTextareaMode="false" in the markup.
Please help me figure out what I'm doing wrong...
Here is my aspx markup
<asp:UpdatePanel runat="server" ID="itemUpdatePanel" UpdateMode="Conditional"> <ContentTemplate> <div class="buttonPanelLeft"> <SuperPanel:ContentButton ID="AddNewFAQItemButton" runat="server" CssClass="buttonShellWidthMedium" Text="Add FAQ Item" OnClientClick="return CheckSelectedCategory();" meta:resourcekey="AddNewFAQItemButton"></SuperPanel:ContentButton> </div> <div class="pad10Clear"> </div> <asp:Panel runat="server" ID="FAQContainerTitlePanel" Style="margin-top: 5px; margin-bottom: 5px; font-weight: bold;"> <asp:Label ID="faqContainerTitleText" runat="server" Text="Frequently Asked Questions and Answers" meta:resourcekey="faqContainerTitleText" /> </asp:Panel> <ajax:ReorderList ID="itemList" PostBackOnReorder="True" DataSourceID="itemDataSource" CssClass="itemList" DragHandleAlignment="Top" ItemInsertLocation="End" DataKeyField="FAQID" CallbackCssStyle="callbackStyle" SortOrderField="SortOrder" runat="server" LayoutType="User" AllowReorder="True" ShowInsertItem="True"> <DragHandleTemplate> <div class="clear"> </div> <div class="groupItemDragHandle" style="float: left; *margin-left: -4px;"> </div> <div class="clear"> </div> </DragHandleTemplate> <EditItemTemplate> <asp:Panel ID="editFAQItemDiv" runat="server"> <hr style="width: 100%;"></hr> <div class="pad10Clear"> </div> <div class="groupItemCommandBar"> <asp:Label ID="selectCategoryText" runat="server" meta:resourcekey="selectCategoryText" Text="FAQ Category:"></asp:Label> <div class="clear"> </div> <asp:DropDownList ID="categoryList" runat="server" CssClass="groupItemDropDown" DataSourceID="categoryDataSource" DataTextField="CategoryName" DataValueField="CategoryID" SelectedValue='<%# Bind("CategoryID") %>'> </asp:DropDownList> <div class="pad10Clear"> </div> <div> <asp:LinkButton ID="faqItemSaveButton" runat="server" CommandName="Update" CssClass="saveButton" meta:resourcekey="faqItemSaveButton" OnClientClick="endItemEdit();ShowAddNewCategoryButton(true);" Style="float: left;"></asp:LinkButton> <asp:LinkButton ID="faqItemCancelButton" runat="server" CommandName="Cancel" CssClass="cancelButton" meta:resourcekey="faqItemCancelButton" OnClientClick="endItemEdit();ShowAddNewCategoryButton(true);" Style="float: left;"></asp:LinkButton> </div> </div> <div class="pad5Clear"> </div> <div class="groupItemQuestion"> <asp:Label ID="editQuestionLabel" runat="server" Style="font-size: 15pt;" meta:resourcekey="editQuestionLabel" SkinID="BoldFormFieldLabel" Text="Q:"></asp:Label> </div> <div class="faqError"> <asp:RequiredFieldValidator ID="itemEditQuestionValidator" runat="server" ControlToValidate="questionEditor" Display="Dynamic" meta:resourcekey="itemEditQuestionValidator" Text="Question is required."></asp:RequiredFieldValidator> </div> <div class="pad10Clear"> </div> <div class="HtmlEditorItem"> <telerik:RadEditor ID="questionEditor" runat="server" Height="200px" Width="99%" StripFormattingOnPaste="MSWordRemoveAll" Content='<%# Bind("Question") %>' EnableResize="False" SkinID="BasicSetOfTools" EnableEmbeddedSkins="False"> </telerik:RadEditor> </div> <div class="pad10Clear"> </div> <div class="groupItemQuestion"> <asp:Label ID="editAnswerLabel" runat="server" meta:resourcekey="editAnswerLabel" Style="font-size: 15pt;" SkinID="BoldFormFieldLabel" Text="A:"></asp:Label> </div> <asp:RequiredFieldValidator ID="itemEditAnswerValidator" runat="server" ControlToValidate="answerEditor" Display="Dynamic" meta:resourcekey="itemEditAnswerValidator" Text="Answer is required."></asp:RequiredFieldValidator> <div class="pad10Clear"> </div> <div class="HtmlEditorItem"> <telerik:RadEditor ID="answerEditor" runat="server" Height="200px" Width="99%" EnableResize="False" StripFormattingOnPaste="MSWordRemoveAll" SkinID="BasicSetOfTools" Content='<%# Bind("Answer") %>' EnableEmbeddedSkins="False"> </telerik:RadEditor> </div> <hr style="width: 100%;"></hr> <div class="pad10Clear"> </div> <asp:HiddenField ID="editSortOrderHiddenField" runat="server" Value='<%# Bind("SortOrder") %>' /> </asp:Panel> </EditItemTemplate> <InsertItemTemplate> <asp:Panel ID="insertFAQItemPanel" runat="server" Style="display: none; width: 800px; background-color: #FFFFFF; padding: 8px 8px 8px 8px;"> <SkinnedButton:SkinnedPanel ID="AddFAQItemSkinnedPanel" runat="server" CssClass="widthPx800" GroupingText="Add FAQ Item" meta:resourcekey="AddFAQItemSkinnedPanel"> <div class="clear"> </div> <div class="panelInsidePadding"> <div class="clear"> </div> <asp:Panel ID="insertPanel" runat="server" CssClass="groupItem" Style="margin-top: 10px;"> <div> <div class="groupItemQuestion"> <asp:RequiredFieldValidator ID="itemAddQuestionValidator" runat="server" ControlToValidate="itemAddQuestionEditor" Display="Dynamic" meta:resourcekey="itemAddQuestionValidator" Text="Question is required." ValidationGroup="InsertFAQItem"></asp:RequiredFieldValidator> </div> <div class="groupItemQuestion"> <asp:Label ID="enterQuestionText" runat="server" meta:resourcekey="enterQuestionText" SkinID="BoldFormFieldLabel" Text="Enter Question:"></asp:Label> </div> <div class="HtmlEditorItem"> <div class="clearfix"> </div> <telerik:RadEditor ID="itemAddQuestionEditor" runat="server" Height="250px" Width="99%" Content='<%# Bind("Question") %>' SkinID="BasicSetOfTools" EnableResize="False" StripFormattingOnPaste="MSWordRemoveAll" EnableTextareaMode="False"> <Modules> <telerik:EditorModule Name="EditorStatsModule" Enabled="true" Visible="true" /> <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="False" /> </Modules> </telerik:RadEditor> <div class="clearfix"> </div> </div> </div> <div> <div class="groupItemAnswer"> <asp:RequiredFieldValidator ID="itemAddAnswerValidator" runat="server" ControlToValidate="itemAddAnswerEditor" Display="Dynamic" meta:resourcekey="itemAddAnswerValidator" Text="Answer is required." ValidationGroup="InsertFAQItem"></asp:RequiredFieldValidator> </div> <div class="groupItemAnswer"> <asp:Label ID="enterAnswerText" runat="server" meta:resourcekey="enterAnswerText" SkinID="BoldFormFieldLabel" Text="Enter Answer:"></asp:Label> </div> <div class="HtmlEditorItem"> <telerik:RadEditor ID="itemAddAnswerEditor" runat="server" Height="250px" Width="99%" Content='<%# Bind("Answer") %>' SkinID="BasicSetOfTools" EnableResize="False" StripFormattingOnPaste="MSWordRemoveAll" EnableTextareaMode="False"> <Modules> <telerik:EditorModule Name="EditorStatsModule" Enabled="true" Visible="true" /> <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="False" /> </Modules> </telerik:RadEditor> </div> </div> </asp:Panel> <div class="clear"> </div> <div class="buttonPanel" style="margin: 5px 2px 5px 5px;"> <SuperPanel:ContentButton ID="CancelAddFAQItemLinkButton" runat="server" CommandName="Cancel" CssClass="buttonShellWidthRegular" ToolTip="Cancel" meta:resourcekey="CancelAddFAQItemLinkButton"> </SuperPanel:ContentButton> <SuperPanel:ContentButton ID="SaveAddFAQItemLinkButton" runat="server" CommandName="Insert" CssClass="buttonShellWidthRegular" meta:resourcekey="SaveAddFAQItemLinkButton" ToolTip="Save" ValidationGroup="InsertFAQItem"> </SuperPanel:ContentButton> </div> <div class="clear"> </div> </div> </SkinnedButton:SkinnedPanel> </asp:Panel> <ajax:ModalPopupExtender ID="modalPopup" runat="server" BackgroundCssClass="popUpBackground" BehaviorID="AddNewFAQItemButton" DynamicServicePath="" Enabled="True" PopupControlID="insertFAQItemPanel" TargetControlID="AddNewFAQItemButton" OnLoad="modalPopup_OnLoad"> </ajax:ModalPopupExtender> <div class="spacer"> </div> </InsertItemTemplate> <ItemTemplate> <hr style="width: 100%;"></hr> <div class="pad5Clear"> </div> <div class="groupItem"> <asp:Panel ID="groupItemCommandBar" runat="server" CssClass="groupItemCommandBar"> <asp:LinkButton ID="itemEdit" runat="server" CommandName="Edit" CssClass="editButton" meta:resourcekey="itemEdit" OnClientClick="beginItemEdit(this.id); ShowAddNewCategoryButton(false);" Style="float: left;" ToolTip="Edit FAQ"></asp:LinkButton> <div style="width: 5px; float: left;"> </div> <asp:LinkButton ID="itemDelete" runat="server" CommandName="Delete" CssClass="deleteButton" ToolTip="Delete FAQ" meta:resourcekey="itemDelete" Style="float: left;" Text=""></asp:LinkButton> </asp:Panel> <div class="pad5Clear"> </div> <div class="groupItemQuestion"> <asp:Label ID="TheQuestionIsLabel" runat="server" meta:resourcekey="TheQuestionIsLabel" SkinID="BoldFormFieldLabel" Text="Q:" Style="font-size: 15pt;"></asp:Label> <div class="clear"> </div> <asp:Label ID="questionLabel" runat="server" meta:resourcekey="questionLabel" Text='<%# Convert.ToString(Eval("Question")) %>'></asp:Label> </div> <div class="groupItemAnswer"> <asp:Label ID="TheAnswerIsLabel" runat="server" meta:resourcekey="TheAnswerIsLabel" SkinID="BoldFormFieldLabel" Text="A:" Style="font-size: 15pt;"></asp:Label> <div class="clear"> </div> <asp:Label ID="answerLabel" runat="server" meta:resourcekey="answerLabel" Text='<%# Convert.ToString(Eval("Answer")) %>'></asp:Label> </div> </div> </ItemTemplate> <ReorderTemplate> <div class="groupItemReorderCue"> </div> </ReorderTemplate> </ajax:ReorderList> </ContentTemplate></asp:UpdatePanel>