Hello,
we have problem with custom skins and Telerik controls on Update Panels.
Scenario:
We have full customized Bootstrap themes generated from SCSS Telerik sources. Whole skin is in one file on our site, so no need to get skins from Telerik Skins Assembly.
We are using custom user control to injects css files to page (in example: Controls\CombinedReference.cs)
Problem:
When Telerik control is invisible on initial page load and postback occurs, our css files are overwritten using webresource.axd added after are links.
Just FYI - in test application, I have enabled EnableEmbeddedSkins to see overrided styles. I can disable it to prevent including themes, abut it still includes base CSS files in problem cases.
Test cases:
In test application, there is page "Default". Custom css files are injected in "OnPreRenderComplete" event and all works fine. Our CSS wins, because other CSS are included before.
Screens: 01-default1_before-postback.png + 02-default1_after-postback.png
But this works only if "base.OnPreRenderComplete(e)" is not called :-) In that case is result the same as next test case.
In page "Default2", there is out custom user control. This controls does almost the same, but in "Page_PreRenderComplete". Result is the same as in previous case with enabled base event. CSS are overwriten.
Screen: 03-default2_after-postback.png
Result:
So it seems that base "PreRenderComplete" event is responsible to injecting css files using handler to head and Telerik handlers somehow goes "the last".
Attached screens:
01-default1_before-postback.png - Initial page load
02-default1_after-postback.png - After postback - Good result
03-default2_after-postback.png - After postback - Wrong result
Test application:
[link removed]
I have 2 questions:
1) How to get working example to get our CSS always to win?
2) Is there any way, how to complete disable serving all Telerik css files (base and skins) using WebResource.axd and generate everything from source scss files?
Best Regards
René
9 Answers, 1 is accepted
Hi René,
Thank you for all the details and working sample.
First I would like to notify you that I have removed the link to the sample project and I would like to remind you that sharing Commercial Assemblies on public facing Web Sites is not allowed as it could have legal consequences.
As for the issue you have reported, this is a known problem when controls are not loaded at initial load, but later after a PostBack. Loading Skins for controls is done on demand. As soon as they become visible either at initial load of on PostBack, the StyleSheets targeting the control will be loaded too. That results in registering the WebResources after the Custom Skin.
We are aware of this issue and until we manage to fix it, a viable workaround would be to register the Skin in the body tag instead.
For example, create a PlaceHolder as the first control in the Body tag.
<body id="MainBody" runat="server">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<%--Other Controls--%>
</body>
In the Class you use to register the skins, add the Control to the PlaceHolder you have created.
private void Page_PreRenderComplete(object sender, EventArgs e)
{
var styleLinks = new List<string>
{
"styles/styles.css",
"styles/telerik.css"
};
var styles = Styles.Render(styleLinks.ToArray());
var lit = new LiteralControl
{
Text = styles.ToString()
};
Page.FindControl("PlaceHolder1").Controls.Add(lit);
//Page.Header.Controls.Add(lit);
}
This will ensure that the Custom skin will always be the last one registered.
Kind regards,
Attila Antal
Progress Telerik
Rank 2
Hello,
thank for response.
Just for clarification - attached application uses public Trial version of controls, so I think it is ok, or not?
Ok, I'll try this workaround and I will see.
And what about my 2nd question? Is there any "simple" way how to build and use all skins on my side, without using handler injection?
Best Regards
René
Hi René,
My mistake, you're right. It is the trial version and that should be okay to be shared on public facing websites.
In addition to generating a Custom Theme using the Progress Sass ThemeBuilder, you can import those theme files into a class to make them a WebResource and create your own skins assembly. Then you will only need to reference the DLL in the project you like and assign the skin name to the controls. See How to Load Skins from External Assemblies
Kind regards,
Attila Antal
Progress Telerik
Rank 2
Hello,
but I'm not talking about Theme builder. I want to build one css file from source scss and simply it to page. Without assembly. Just one pure minified css.
Regards
René
René,
I am afraid we do not have tools that can generate only one SASS or CSS file that includes the rules for all controls. From performance perspective we provide with separate CSS files for each controls, so that you can choose to load the one you need.
Kind regards,
Attila Antal
Progress Telerik
Rank 2
Hello,
this is not problem. All scss files are in sources. So with some additional work with this framework I made "mini framework" to build custom themes based on existing one. telerik.css file in sample application is just custom Bootstrap theme created from sources.
But I'm looking for a way to made base css file too. I think it will not be problem. But if I have it, I need to disable generating css files from WebResource.axd, because I want to use static files.
Is there any way how to disable providing all webresources for all controls?
Regards
René
Hi René,
I wish we had it, so that I could provide you with what you need, but I am afraid we don't have the required tools/files you are looking for.
About the WebResources.axd, you can eliminate some of it but not everything.
The Telerik Controls are generic ASP Controls that are wrapped around with styles, modified structure, and behavior. They heavily rely on resources such as CSS and JavaScript. If we would have an option to turn these resources off entirely, the controls will not behave or look as they do now, then what would be the point?
Even if you have managed to to turn off the WebResources for the Telerik control, the ASP.NET Framework also has few on its own.
Kind regards,
Attila Antal
Progress Telerik
Rank 2
Hello,
I don't want to eliminate all WebResources.axd, but just "switch" Telerik control to not use WebResources.axd for css files. I understand, that there is rich logic in JavaScripts etc. and many scripts has to be registered to get controls work. I just want to be able serve all css by myself to prevent any overrides.
And about workaround for skins - is there any issue I can follow to see progres about postbacked rendering? I can try to use css registration in body, but still it is invalid use of link elements and page will not be valid html5.
Regards
René
Hi René,
Absolutely, you can avoid loading the embedded stylesheets by setting the EnableEmbeddedSkins and EnableEmbeddedBaseStylesheet properties to false for the controls.
You can test it yourself:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:RadButton runat="server" ID="RadButton1" Text="RadButton1"
EnableEmbeddedSkins="false"
EnableEmbeddedBaseStylesheet="false" />
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
EnableEmbeddedSkins="false"
EnableEmbeddedBaseStylesheet="false">
</telerik:RadGrid>
</form>
</body>
</html>
C#
using System.Linq;
using Telerik.Web.UI;
public partial class Default : System.Web.UI.Page
{
protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = Enumerable.Range(1, 4).Select(x => new { ID = x, Description = "Desc " + x });
}
}
Please note that there are few styles that will be loaded regardless and cannot be turned off. Those are the embedded fonts, ripple effect styles for the material skin, but none of these will conflict with the custom styles.
Kind regards,
Attila Antal
Progress Telerik