Skin not rendering after PostBackTrigger

[Remi]

Hi Telerik,

I have an UpdatePanel where I do some Ajax processes.
When I want to save my form, I want to do a PostBack of my page. I do it so with a PostBackTrigger, such as:
<asp:PostBackTrigger ControlID="but_save" />

The thing is, when the page reloads, I loose the skin of my RadControls items, expect the RadComboBox ones. I fixed this problem for my RadUpload and RadGrid (by setting the EnableAjaxSkinRendering Property to true on these elements after the update).
But it still doesn't work with my RadDatePicker... I set the same property to true, before and/or after the update, but the skin is not rendered.

Do you know what my problem can be?

Thanks for your help.
Remi

[Remi]

I use the following snippet I found in this thread: http://www.telerik.com/community/forums/aspnet-ajax/upload/rad-upload-with-ajax.aspx#654313

public void SetAjaxSkin(Control target)
{
    if (!target.Visible)
        return;
    if (target is Telerik.Web.ISkinnableControl)
    {
        Telerik.Web.ISkinnableControl skinnableControl = target as Telerik.Web.ISkinnableControl;
        skinnableControl.EnableAjaxSkinRendering = true;
    }
    else
    {
        foreach (Control child in target.Controls)
        {
            SetAjaxSkin(child);
        }
    }
}

I call this method with the ID of my UpdatePanel.

It worked with the RadUpload and the RadGrid, but it's still doesn't work for my RadDatePicker...
Do you know what's happening?

Thanks
Remi

[Veli]

Hello Remi,

Can you post some sample code we can run? I tested this scenario, but the skins applied to RadControls load OK.

Kind regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Remi]

Thank you for your reply.
Here is a code where the problem happens.

ASPX

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<p>

The following button will display the panel below using the AsyncPostBackTrigger trigger from the UpdatePanel.<br />

The style are correctly displayed.

<br />

<br />

If I click on the Save button, a PostBack will be trigged and the panel won't be displayed anymore.

<br />

<br />

If I click an other time on the Display button, the skin is lost only on the RadDatePickers (The method works correctly with the RadUpload)

</p>

<asp:Button ID="but_display" runat="server" Text="Display" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Panel ID="panel1" runat="server" Visible="false">

<p>                         Start activity date:

<telerik:RadDatePicker ID="date_start_activity_rad" runat="server">

</telerik:RadDatePicker>                     </p>                     <p>

Delivery date:

<telerik:RadDatePicker ID="date_delivery_rad" runat="server">

</telerik:RadDatePicker>                     </p>

<p>

<telerik:RadUpload ID="rad_upload_file" runat="server" MaxFileInputsCount="5" OverwriteExistingFiles="false"

MaxFileSize="20000000" />

</p>

<p>

<asp:Button ID="but_save" runat="server" Text="Save" />

</p>

</asp:Panel>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="but_display" EventName="Click" />

<asp:PostBackTrigger ControlID="but_save" />

</Triggers>

</asp:UpdatePanel>

</div>

C#

	protected void Page_Load(object sender, EventArgs e)
	{
	// Creation of the events on the button
	this.but_display.Click += new EventHandler(but_display_Click);
	this.but_save.Click += new EventHandler(but_save_Click);
	}
	void but_display_Click(object sender, EventArgs e)
	{
	// Will display the panel
	this.panel1.Visible = true;
	}
	protected void but_save_Click(object sender, EventArgs e)
	{
	// I set the panel unvisible after the click on Save
	this.panel1.Visible = false;
	}
	// Method that will set EnableAjaxSkinRendering to true in all Skinnable RadControls
	public void SetAjaxSkin(Control target)
	{
	if (!target.Visible)
	return;
	if (target is Telerik.Web.ISkinnableControl)
	{
	Telerik.Web.ISkinnableControl skinnableControl = target as Telerik.Web.ISkinnableControl;
	skinnableControl.EnableAjaxSkinRendering = true;
	}
	else
	{
	foreach (Control child in target.Controls)
	{
	SetAjaxSkin(child);
	}
	}
	}
	void Page_PreRender(object sender, EventArgs e)
	{
	// Execution of the previous method
	this.SetAjaxSkin(this.UpdatePanel1);
	}

As you can see, it seems to be not just the PostBackTrigger that causes the issue. There's also the refresh of the panel by an external control with Ajax (with AsyncPostBackTrigger)

Hope I'm clear.

Thanks for your help.
Remi

[Veli]

Hello Remi,

EnableAjaxSkinRendering="true" is not supported with asp:UpdatePanel. You can use RadAjaxPanel or RadAjaxManager, instead. If you still need to use UpdatePanel, you need to register the skin CSS files manually on page.

For the sample code you provided me, here are the <link> elements:

<head runat="server">
    <title></title>
    <link class="Telerik_stylesheet" type="text/css" rel="stylesheet" href="/Common/WebResource.axd?d=XNWnnsKD36XCOF4wdCoroq7pM8lcPnCTIZlh4r-wtCb7v9ATXkJjf6Pg2q5lRBNcTmExDE1xQBhxnaPA9rvkgQ2&amp;t=633819789860000000">
    <link class="Telerik_stylesheet" type="text/css" rel="stylesheet" href="/Common/WebResource.axd?d=XNWnnsKD36XCOF4wdCoroq7pM8lcPnCTIZlh4r-wtCbr_Rl1cxhDgZeGOUnXtYsj0&amp;t=633819789860000000">
    <link class="Telerik_stylesheet" type="text/css" rel="stylesheet" href="/Common/WebResource.axd?d=XNWnnsKD36XCOF4wdCoroq7pM8lcPnCTIZlh4r-wtCYIRKgNENPR8pW8euZaUjU3ztZw-bZLU88B7oN6eXmqAP61jNxLpXh7sBGQZcpXsrI1&amp;t=633819789860000000">
    <link class="Telerik_stylesheet" type="text/css" rel="stylesheet" href="/Common/WebResource.axd?d=XNWnnsKD36XCOF4wdCoroq7pM8lcPnCTIZlh4r-wtCZI8iOoOLGcm3FsJ0bQaWhDlhQ0FlXRjEE1pe8Aai3PEQ2&amp;t=633819789860000000">
</head>

Check this out. Skins should now be applied properly.

Kind regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.