This is a migrated thread and some comments may be shown as answers.

RadEditor & RadUpload Control loosing its SKIN

2 Answers 99 Views

TreeList

This is a migrated thread and some comments may be shown as answers.

Ajay asked on 25 Jun 2012, 01:27 PM

RadUploadANDRadEditor.PNG

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 Answers, 1 is accepted

answered on 27 Jun 2012, 06:28 AM

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.