RadEditor & RadUpload Control loosing its SKIN

3 posts, 0 answers
  1. Ajay
    Ajay avatar
    66 posts
    Member since:
    May 2009

    Posted 25 Jun 2012 Link to this post

    Hi Telerik Support,

    I have been very frustrated as my controls such as RadEditor control & RadUpload control are loosing its SKIN when I try to edit any record within my RadTreeList.

    When I try to insert any item controls are shown properly (i.e. with proper SKIN) but when I try to edit an partcular record its really behaves weirdly an that gives me headaches.

    Please find the attachment  .

    While the placement of my controls are shown below as :-

    <telerik:RadTreeList ID="KnowledgeBaseRadTreeList" runat="server" AllowPaging="True"
                               DataSourceID="KnowledgeBaseSqlDataSource" PageSize="20" DataKeyNames="KnowledgeBase_ID"
                               ParentDataKeyNames="KnowledgeBase_Parent_ID" AutoGenerateColumns="False" Width="100%"
                               OnInsertCommand="KnowledgeBaseRadTreeList_InsertCommand" OnItemCommand="KnowledgeBaseRadTreeList_ItemCommand"
                               OnItemDrop="KnowledgeBaseRadTreeList_ItemDrop" OnUpdateCommand="KnowledgeBaseRadTreeList_UpdateCommand"
                               OnItemDataBound="KnowledgeBaseRadTreeList_ItemDataBound">
                               <PagerStyle Mode="NextPrevNumericAndAdvanced" />
                               <Columns>
                                   <telerik:TreeListEditCommandColumn UniqueName="InsertCommandColumn" ButtonType="ImageButton"
                                       AddRecordText="Add" ShowEditButton="true" ItemStyle-CssClass="MyImageButton">
                                       <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="60px" />
                                       <HeaderStyle VerticalAlign="Top" HorizontalAlign="Left" Width="60px" />
                                   </telerik:TreeListEditCommandColumn>
                                   <telerik:TreeListTemplateColumn DataField="KnowledgeBase_Title" UniqueName="KnowledgeBase_Title"
                                       HeaderText="Title">
                                       <ItemTemplate>
                                           <asp:Label ID="KnowledgeBaseTitleLabel" runat="server" Text='<%# Bind("KnowledgeBase_Title") %>'></asp:Label>
                                       </ItemTemplate>
                                       <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="120px" />
                                       <HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" Width="120px" />
                                   </telerik:TreeListTemplateColumn>
                                   <telerik:TreeListTemplateColumn DataField="FAQ_Description" UniqueName="FAQ_Description"
                                       HeaderText="Description">
                                       <ItemTemplate>
                                           <asp:Label ID="KnowledgeBaseDescriptionLabel" runat="server" Text='<%# ( Eval("KnowledgeBase_Description").ToString().Length > 150)? string.Concat(Eval("KnowledgeBase_Description").ToString().Substring(0, 150), ".....") : Eval("KnowledgeBase_Description") %>'></asp:Label>
                                           <telerik:RadToolTip ID="KnowledgeBaseDescriptionRadToolTip" TargetControlID='<%# ( Eval("KnowledgeBase_Description").ToString().Length > 150)? "KnowledgeBaseDescriptionLabel" : "" %>'
                                               Width="400px" Height="300px" ContentScrolling="Y" runat="server" HideDelay="1000"
                                               Position="TopCenter" RelativeTo="Element" ShowDelay="1000">
                                               <%# Eval("KnowledgeBase_Description")%>
                                           </telerik:RadToolTip>
                                       </ItemTemplate>
                                       <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
                                       <HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" />
                                   </telerik:TreeListTemplateColumn>
                                   <telerik:TreeListTemplateColumn DataField="ParentName" UniqueName="ParentName" HeaderText="Parent Item">
                                       <ItemTemplate>
                                           <asp:Label ID="ParentTitleLabel" runat="server" Text='<%# Bind("ParentName") %>'></asp:Label>
                                       </ItemTemplate>
                                       <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100px" />
                                       <HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100px" />
                                   </telerik:TreeListTemplateColumn>
                                   <telerik:TreeListTemplateColumn DataField="KnowledgeBase_Order" UniqueName="KnowledgeBase_Order"
                                       HeaderText="Order">
                                       <ItemTemplate>
                                           <telerik:RadNumericTextBox ID="KnowledgeBaseOrderRadNumericTextBox" MinValue="1"
                                               NumberFormat-DecimalDigits="0" Enabled="false" runat="server" Width="50px" Text='<%# Bind("KnowledgeBase_Order") %>'>
                                               <EnabledStyle Font-Names="Verdana" HorizontalAlign="Right" />
                                           </telerik:RadNumericTextBox>
                                       </ItemTemplate>
                                       <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                   </telerik:TreeListTemplateColumn>
                                   <telerik:TreeListTemplateColumn HeaderText="Status" DataField="KnowledgeBase_ActiveStatus"
                                       UniqueName="KnowledgeBase_ActiveStatus">
                                       <ItemTemplate>
                                           <asp:Label ID="ActiveStatusLabel" runat="server" CssClass='<%# (Convert.ToBoolean(Eval("KnowledgeBase_ActiveStatus"))) ? "active" : "inactive" %>'
                                               ToolTip='<%# (Convert.ToBoolean(Eval("KnowledgeBase_ActiveStatus"))) ? "Active" : "Inactive" %>'
                                               Text="     "></asp:Label>
                                       </ItemTemplate>
                                       <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                   </telerik:TreeListTemplateColumn>
                                   <telerik:TreeListTemplateColumn DataField="KnowledgeBase_ActiveStatus" HeaderText="Action"
                                       UniqueName="ActiveStatus">
                                       <ItemTemplate>
                                           <asp:ImageButton ID="ActiveInactiveButton" runat="server" ToolTip='<%# (Convert.ToBoolean(Eval("KnowledgeBase_ActiveStatus"))) ? "Make inactive" : "Make active" %>'
                                               Width="14px" Height="14px" CommandName="ActiveInactive" ImageUrl='<%# (Convert.ToBoolean(Eval("KnowledgeBase_ActiveStatus"))) ? "../App_Themes/ELPISCMS/images/inactive.png" : "../App_Themes/ELPISCMS/images/active.png" %>' />
                                       </ItemTemplate>
                                       <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                   </telerik:TreeListTemplateColumn>
                               </Columns>
                               <EditFormSettings EditFormType="Template" PopUpSettings-Width="100%">
                                   <FormTemplate>
                                       <asp:Panel ID="DetailsPanel" runat="server" DefaultButton="SaveRadButton">
                                           <table border="0" cellpadding="0" cellspacing="5" class="innertable">
                                               <tr>
                                                   <td class="td18">
                                                       Title : <span class="mandatorymark">*</span>
                                                   </td>
                                                   <td class="td82">
                                                       <telerik:RadTextBox ID="KnowledgeBaseTitleRadTextBox" runat="server" SkinID="KnowledgeBaseTitleTitleRadTextBox">
                                                       </telerik:RadTextBox>
                                                       <asp:RequiredFieldValidator ID="KnowledgeBaseTitleRequiredFieldValidator" runat="server"
                                                           ValidationGroup="KnowledgeBaseValidationGroup" Display="Dynamic" SetFocusOnError="false"
                                                           ControlToValidate="KnowledgeBaseTitleRadTextBox" CssClass="requiredfield" ErrorMessage="Required!"></asp:RequiredFieldValidator>
                                                   </td>
                                               </tr>
                                               <tr>
                                                   <td class="td18">
                                                       Description : <span class="mandatorymark">*</span>
                                                   </td>
                                                   <td class="td82">
                                                       <%--<telerik:RadTextBox ID="KnowledgeBaseDescriptionRadTextBox" runat="server" TextMode="MultiLine"
                                                           Rows="8" SkinID="KnowledgeBaseResourceDescriptionRadTextBox">
                                                       </telerik:RadTextBox>--%>
                                                       <telerik:RadEditor ID="KnowledgeBaseDescriptionRadEditor" runat="server" AutoResizeHeight="false"
                                                           EnableResize="false" OnClientLoad="OnClientLoad" EditModes="Design, Html" AllowScripts="false"
                                                           ContentFilters="RemoveScripts,MakeUrlsAbsolute,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"
                                                           NewLineBr="true" StripFormattingOptions="AllExceptNewLines" StripFormattingOnPaste="AllExceptNewLines"
                                                           Height="350px" Width="700px">
                                                           <ImageManager ViewPaths="~/uploads/editoruploadimages" UploadPaths="~/uploads/editoruploadimages"
                                                               DeletePaths="~/uploads/editoruploadimages" />
                                                           <CssFiles>
                                                               <telerik:EditorCssFile Value="" />
                                                           </CssFiles>
                                                           <ContextMenus>
                                                               <telerik:EditorContextMenu Enabled="true">
                                                                   <telerik:EditorTool Name="Cut" />
                                                                   <telerik:EditorTool Name="Copy" />
                                                                   <telerik:EditorTool Name="Paste" />
                                                               </telerik:EditorContextMenu>
                                                           </ContextMenus>
                                                           <Tools>
                                                               <telerik:EditorToolGroup>
                                                                   <telerik:EditorTool Name="AjaxSpellCheck" />
                                                                   <telerik:EditorTool Name="FindAndReplace" />
                                                                   <telerik:EditorTool Name="SelectAll" />
                                                                   <telerik:EditorTool Name="Cut" />
                                                                   <telerik:EditorTool Name="Copy" />
                                                                   <telerik:EditorTool Name="Paste" />
                                                                   <telerik:EditorTool Name="Redo" />
                                                                   <telerik:EditorTool Name="Undo" />
                                                                   <telerik:EditorTool Name="InsertLink" />
                                                               </telerik:EditorToolGroup>
                                                               <telerik:EditorToolGroup>
                                                                   <telerik:EditorTool Name="Bold" />
                                                                   <telerik:EditorTool Name="Italic" />
                                                                   <telerik:EditorTool Name="Underline" />
                                                               </telerik:EditorToolGroup>
                                                               <telerik:EditorToolGroup>
                                                                   <telerik:EditorTool Name="FontName" />
                                                                   <telerik:EditorTool Name="RealFontSize" />
                                                                   <telerik:EditorTool Name="ApplyClass" />
                                                               </telerik:EditorToolGroup>
                                                               <telerik:EditorToolGroup>
                                                                   <telerik:EditorTool Name="ForeColor" />
                                                                   <telerik:EditorTool Name="BackColor" />
                                                                   <telerik:EditorTool Name="FormatStripper" />
                                                               </telerik:EditorToolGroup>
                                                               <telerik:EditorToolGroup>
                                                                   <telerik:EditorTool Name="InsertAnchor" />
                                                                   <telerik:EditorTool Name="InsertCustomLink" />
                                                                   <telerik:EditorTool Name="InsertDate" />
                                                                   <telerik:EditorTool Name="InsertGroupbox" />
                                                                   <telerik:EditorTool Name="InsertHorizontalRule" />
                                                                   <telerik:EditorTool Name="InsertUnorderedList" />
                                                                   <telerik:EditorTool Name="InsertOrderedList" />
                                                                   <telerik:EditorTool Name="Paragraph" />
                                                                   <telerik:EditorTool Name="InsertTable" />
                                                                   <telerik:EditorTool Name="InsertSnippet" />
                                                               </telerik:EditorToolGroup>
                                                               <telerik:EditorToolGroup>
                                                                   <telerik:EditorTool Name="Indent" />
                                                                   <telerik:EditorTool Name="Outdent" />
                                                                   <telerik:EditorTool Name="JustifyRight" />
                                                                   <telerik:EditorTool Name="JustifyLeft" />
                                                                   <telerik:EditorTool Name="JustifyCenter" />
                                                               </telerik:EditorToolGroup>
                                                               <telerik:EditorToolGroup>
                                                                   <telerik:EditorTool Name="LinkManager" />
                                                                   <telerik:EditorTool Name="ImageManager" />
                                                                   <telerik:EditorTool Name="ImageMapDialog" />
                                                                   <telerik:EditorTool Name="DocumentManager" />
                                                                   <telerik:EditorTool Name="ConvertToLower" />
                                                                   <telerik:EditorTool Name="ConvertToUpper" />
                                                                   <telerik:EditorTool Name="ToggleScreenMode" />
                                                               </telerik:EditorToolGroup>
                                                           </Tools>
                                                       </telerik:RadEditor>
                                                       <div style="float: right;">
                                                           <span id="counter" style="text-align: right;"></span>
                                                       </div>
                                                       <asp:RequiredFieldValidator ID="KnowledgeBaseDescriptionRequiredFieldValidator" runat="server"
                                                           ValidationGroup="KnowledgeBaseValidationGroup" Display="Dynamic" SetFocusOnError="false"
                                                           ControlToValidate="KnowledgeBaseDescriptionRadEditor" CssClass="requiredfield"
                                                           ErrorMessage="Required!"></asp:RequiredFieldValidator>
                                                   </td>
                                               </tr>
                                               <td class="td18">
                                                   Upload Document :
                                               </td>
                                               <td class="td82">
                                                   <telerik:RadUpload ID="UploadDocumentRadUpload" runat="server" ControlObjectsVisibility="AddButton,RemoveButtons"
                                                       CssClass="RadUpload" InputSize="50" AllowedFileExtensions=".png,.jpg,.jpeg,.gif"
                                                       oncontextmenu="return false;" onpaste="return false;" ReadOnlyFileInputs="true" />
                                                   <span style="line-height: 15px; vertical-align: top;">
                                                       <asp:Label ID="ImageExtensionLabel" runat="server" CssClass="UploadLabel" Text="<br/>(Only .PNG,.JPG,.JPEG,.GIF images allowed)" />
                                                       <br />
                                                       <asp:Label runat="server" ID="ImageNameLabel" Visible="false" />
                                                   </span>
                                                   <br />
                                                   <telerik:RadProgressArea ID="UploadDocumentRadProgressArea" runat="server" ProgressIndicators="CurrentFileName">
                                                   </telerik:RadProgressArea>
                                                   <asp:CustomValidator ID="ValidateExtensionCustomValidator" CssClass="requiredfield"
                                                       runat="server" Display="Dynamic" ValidationGroup="KnowledgeBaseValidationGroup"
                                                       ClientValidationFunction="ValidateExtensions" SetFocusOnError="true">
                                                       <span style="FONT-SIZE: 11px;">Invalid extension! Only (jpg, jpeg, gif, png) extension are allowed to upload.</span>
                                                   </asp:CustomValidator>
                                               </td>
                                               <tr>
                                                   <td>
                                                         
                                                   </td>
                                                   <td class="td82">
                                                       <telerik:RadGrid ID="FilesRadGrid" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
                                                           AllowSorting="True" AutoGenerateColumns="False" CellSpacing="0" DataSourceID="FilesSqlDataSource"
                                                           GridLines="None" Width="530px" Visible="false" OnItemCommand="FilesRadGrid_ItemCommand">
                                                           <MasterTableView DataKeyNames="KnowledgeBase_Uploads_ID" DataSourceID="FilesSqlDataSource">
                                                               <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                                                                   <HeaderStyle Width="20px" />
                                                               </RowIndicatorColumn>
                                                               <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                                                                   <HeaderStyle Width="20px" />
                                                               </ExpandCollapseColumn>
                                                               <Columns>
                                                                   <telerik:GridBoundColumn DataField="FileName" FilterControlAltText="Filter FileName column"
                                                                       HeaderText="File Name" SortExpression="FileName" UniqueName="FileName" FilterControlWidth="80%">
                                                                       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                                       <ItemStyle HorizontalAlign="Left" Font-Size="11px" Font-Names="Arial" VerticalAlign="Middle" />
                                                                   </telerik:GridBoundColumn>
                                                                   <telerik:GridTemplateColumn HeaderText="Action" AllowFiltering="false">
                                                                       <ItemTemplate>
                                                                           <asp:ImageButton ID="DeleteImageButton" runat="server" ToolTip="Delete" CommandName="Delete"
                                                                               ImageUrl="~/App_Themes/ELPISCMS/images/delete.png" OnClientClick="if (!confirm('Are you sure, you want to delete this record?')) {return false;}"
                                                                               CommandArgument='<%# Eval("KnowledgeBase_Uploads_ID") +":"+ Eval("KnowledgeBase_Uploads_ID") %>' />
                                                                       </ItemTemplate>
                                                                       <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
                                                                       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
                                                                   </telerik:GridTemplateColumn>
                                                               </Columns>
                                                               <EditFormSettings>
                                                                   <EditColumn FilterControlAltText="Filter EditCommandColumn column" />
                                                               </EditFormSettings>
                                                           </MasterTableView>
                                                           <FilterMenu EnableImageSprites="False" />
                                                           <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />
                                                       </telerik:RadGrid>
                                                       <asp:SqlDataSource ID="FilesSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:elpis_cmsConnectionString %>"
                                                           SelectCommand="Usp_KnowledgeBase_Uploads_Select" SelectCommandType="StoredProcedure">
                                                           <SelectParameters>
                                                               <asp:ControlParameter ConvertEmptyStringToNull="true" ControlID="KnowledgeBaseIDHiddenField"
                                                                   DbType="Int32" Name="KnowledgeBase_ID" PropertyName="Value" />
                                                           </SelectParameters>
                                                       </asp:SqlDataSource>
                                                   </td>
                                               </tr>
                                               <tr>
                                                   <td class="td18">
                                                       Status :
                                                   </td>
                                                   <td class="td82">
                                                       <asp:RadioButton ID="ActiveRadioButton" runat="server" CssClass="radiobutton" Checked="true"
                                                           GroupName="ActiveInactive" />Active
                                                       <asp:RadioButton ID="InactiveRadioButton" runat="server" CssClass="radiobutton" GroupName="ActiveInactive" />Inactive
                                                   </td>
                                               </tr>
                                               <tr>
                                                   <td>
                                                         
                                                   </td>
                                                   <td class="td82">
                                                       <telerik:RadButton ID="SaveRadButton" runat="server" Text='<%# (Container is TreeListEditFormInsertItem) ? "Save" : "Update" %>'
                                                           CausesValidation="true" CommandName='<%# (Container is TreeListEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                                           ValidationGroup="KnowledgeBaseValidationGroup" Width="80px">
                                                           <Icon PrimaryIconUrl="~/App_Themes/ELPISCMS/images/save2.png" PrimaryIconLeft="5"
                                                               PrimaryIconTop="3" />
                                                       </telerik:RadButton>
                                                       <telerik:RadButton ID="CancelRadButton" runat="server" Text="Cancel" CommandName="Cancel"
                                                           CausesValidation="false" Width="80px">
                                                           <Icon PrimaryIconUrl="~/App_Themes/ELPISCMS/images/cancel2.png" PrimaryIconLeft="5"
                                                               PrimaryIconTop="3" />
                                                       </telerik:RadButton>
                                                   </td>
                                               </tr>
                                           </table>
                                       </asp:Panel>
                                   </FormTemplate>
                               </EditFormSettings>
                               <ClientSettings AllowItemsDragDrop="true">
                                   <Selecting AllowItemSelection="True" />
                               </ClientSettings>
                           </telerik:RadTreeList>
                           <asp:SqlDataSource ID="KnowledgeBaseSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:elpis_cmsConnectionString %>"
                               SelectCommand="Usp_KnowledgeBase_Select" SelectCommandType="StoredProcedure">
                           </asp:SqlDataSource>

    Can you help me where thing are wrong .

    Also, I have added the code on Page_Load event as :-
    protected void Page_Load(object sender, EventArgs e)
       {
           common.CheckLogin();
     
           if (!IsPostBack)
           {
               KnowledgeBaseRadTreeList.ExpandAllItems();
               DisableReordering();
               MessageLabel.Text = string.Empty;
               MessageLabel.Visible = false;
               SuccessImage.Visible = false;
               NoChangesImage.Visible = false;
               //foreach (TreeListDataItem item in KnowledgeBaseRadTreeList.Items)
               //{
               //    RadEditor KnowledgeBaseDescriptionRadEditor = (item.FindControl("KnowledgeBaseDescriptionRadEditor") as RadEditor);
               //    KnowledgeBaseDescriptionRadEditor.EnableAjaxSkinRendering = true;
     
               //    RadUpload UploadDocumentRadUpload = (item.FindControl("UploadDocumentRadUpload") as RadUpload);
               //    UploadDocumentRadUpload.EnableAjaxSkinRendering = true;
               //}
     
     
           }
       }
    But commented code is not working either (i.e. I'm not able to find the either RadEditor or RadUpload Control)

    Please help !
    Ajay
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Jun 2012 Link to this post

    Hi Ajay,

    I suppose the issue it is causing because you you need to register the CSS class of your skin.

    Go to the RadControls_installation_folder / Skins / Skin_Name and copy the Upload.Skin_Name.css file and the Upload folder to your application folder. Then register it in the <head> section of the page similarly for the Editor control as well.

    Then another possibility of this issue can be i.e could you please clarify which version of RadEditor are you using?
    This problem was fixed in the 2007.3.1425 version of the control and should not be observed. If you are using a version prior to this, please review the following KB article that shows how to resolve the issue:
    Problem when initially hidden RadEditor in ASP.NET AJAX Update Panel

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ajay
    Ajay avatar
    66 posts
    Member since:
    May 2009

    Posted 29 Jun 2012 Link to this post

    Thanks Princy !

    That solution really worked  for me .
    Loads of thanks

    Ajay
Back to Top