Some of my user controls have a dedicated stylesheet file to style that particular user control. So what I've been doing (before AJAX) was adding the stylesheet from the user control's code-behind like this:
protected void Page_Load(object sender, EventArgs e)
{
Page.Header.Controls.Add("/store/catalog1.css");
}
This has been working out nice because no matter what page or other user control loads the user control, it grabs the CSS file as well. But when I'm dynamically loading the user control thru a RadToolTipManager for example, this obviously doesn't work and the dynamically loaded user control remains unstyled. Is there a way to dynamically load the stylesheet as well? I was wondering what Telerik does, do they bite the bullet and load ALL stylesheets when the website first loads, or do they dynamically load stylesheets on a per-needed basis to keep sizes down?
protected void Page_Load(object sender, EventArgs e)
{
Page.Header.Controls.Add("/store/catalog1.css");
}
This has been working out nice because no matter what page or other user control loads the user control, it grabs the CSS file as well. But when I'm dynamically loading the user control thru a RadToolTipManager for example, this obviously doesn't work and the dynamically loaded user control remains unstyled. Is there a way to dynamically load the stylesheet as well? I was wondering what Telerik does, do they bite the bullet and load ALL stylesheets when the website first loads, or do they dynamically load stylesheets on a per-needed basis to keep sizes down?
1 Answer, 1 is accepted
0
Hello bemara57,
This task is a bit challenging to implement reliably in all scenarios. In fact, Telerik RadControls do exactly that, and the code is quite extensive for such a seemingly trivial task - and it includes both server code, as well as client-side script.
I am not able to provide you with the logic as it is a bit hard to rip out from the rest of the code, but I can certainly provide you with some explanations how to approach the issue.
What we basically do is handle two different cases (depending on the scenario):
1. One way is to output a <link> tag directly into the control collection from the server, e.g
HtmlLink link = new HtmlLink();
link.Href = _url;
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("class", "Telerik_stylesheet");
Then, on the client, there is a script that parses the <link> tags on the page, finds those that have their className set to Telerik_stylesheet, and moves them to the head of the page
2. The second approach is a variation of the first one - on the page you need is a clientside function that takes an URL as an argument, constructs a client <link> object and adds it to the page header. Then, from the server-side you need to output a ScriptManager.RegisterStartupScript block containing an invocation of the method.
Here is a sample implementation of such a client-side method:
I hope this information will help you implement a solution relatively easily.
Kind regards,
Tervel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
This task is a bit challenging to implement reliably in all scenarios. In fact, Telerik RadControls do exactly that, and the code is quite extensive for such a seemingly trivial task - and it includes both server code, as well as client-side script.
I am not able to provide you with the logic as it is a bit hard to rip out from the rest of the code, but I can certainly provide you with some explanations how to approach the issue.
What we basically do is handle two different cases (depending on the scenario):
1. One way is to output a <link> tag directly into the control collection from the server, e.g
HtmlLink link = new HtmlLink();
link.Href = _url;
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("class", "Telerik_stylesheet");
Then, on the client, there is a script that parses the <link> tags on the page, finds those that have their className set to Telerik_stylesheet, and moves them to the head of the page
2. The second approach is a variation of the first one - on the page you need is a clientside function that takes an URL as an argument, constructs a client <link> object and adds it to the page header. Then, from the server-side you need to output a ScriptManager.RegisterStartupScript block containing an invocation of the method.
Here is a sample implementation of such a client-side method:
| if (typeof($telerik) != 'undefined' && !$telerik.isSafari) |
| { |
| var links = document.body.getElementsByTagName('link'); |
| if (links && links.length>0) |
| { |
| var documentHead = document.getElementsByTagName('head')[0]; |
| if (documentHead) |
| { |
| for (var i=links.length-1;i>=0;i--) |
| { |
| var linkTag = links[i]; |
| if (linkTag.className == 'Telerik_stylesheet') |
| { |
| var thLinks = documentHead.getElementsByTagName('link'); |
| if (thLinks && thLinks.length>0) |
| { |
| var j=thLinks.length-1; |
| while (j>=0 && thLinks[j--].href != linkTag.href); |
| if (j>=0) |
| continue; |
| } |
| if ($telerik.isIE) |
| { |
| linkTag = linkTag.cloneNode(true); |
| } |
| documentHead.appendChild(linkTag); |
| } |
| } |
| } |
| } |
| } |
I hope this information will help you implement a solution relatively easily.
Kind regards,
Tervel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.