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

Is it possible to load CSS stylesheets thru dynamically loaded user controls?

1 Answer 90 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
bemara57
Top achievements
Rank 1
bemara57 asked on 07 Sep 2008, 04:01 PM
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?

1 Answer, 1 is accepted

Sort by
0
Tervel
Telerik team
answered on 10 Sep 2008, 12:52 PM
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:

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.
Tags
ToolTip
Asked by
bemara57
Top achievements
Rank 1
Answers by
Tervel
Telerik team
Share this question
or