StyleSheetRegistrar - Controlling Order & Adding Mulltiple CDN files

[Patrick Barranis]

Hi.  I'm having two troubles with the Registrars (StyleSheetRegistrar and ScriptRegistrar) that I can't quite resolve.

The first is that I want to be able to control the order in which files are output.  My CSS actually cascades, so order is important (some pages have CSS files that override styles that are in the "global" CSS files for my site).  Is it possible to directly control the order in which the CSS files are linked/added?

If there is no direct control (such as by calling some SetOrder method or something), is it possible to indirectly control the order?  For instance, is the order in which groups are rendered in the order of the alphabetical name of the groups?  E.g. the default group is rendered first, then group "A", then group "Apple", then group "Bravo".

My second question is how to go about adding multiple files from a CDN.  I load both jquery and jquery-UI from Google CDN; when I call ContentDeliveryNetworkUrl on a script group more than once I only end up seeing the last one I call - the others never get added.  Do I actually have to create a separate group for each CDN-based file I want to load?

Thanks!
Patrick

[Kelly Stuard]

Re Q1: I'm having the same problems as you with scripts on the order and sub-directories (but only when combining is turned on). It seems all the non-directory ones are rendered first. I just made the following post for that: http://www.telerik.com/community/forums/aspnet-mvc/general/scriptregistrar-order-while-using-assethandler.aspx

Re Q2: Given what I've seen of the underlying code, you will have to make a group for each set of different CDN destinations.

[Patrick Barranis]

Hi Kelly; thanks for chiming in!

Q1: Hrm; good to know.  I'll try and follow your thread too.

Q2: Wait... (litebulb moment).  The code example given in the Telerik help is:

    Html.Telerik().ScriptRegistrar().Scripts(scripts =>
            scripts.AddGroup("CommonScript", group =>
                group.Add("~/Scripts/Core.js")
                     .Add("~/Scripts/Stuff.js")
                     .Combined(true)
                     .CacheDurationInDays(365)
                     .Compress(true)
                     .ContentDeliveryNetworkUrl("http://mycdn.com/CommonScript.js")
            )
         )
        .Render();

But when you say "... for each set of ..." - what do you mean by "set"?  The above leaves the impression that I have to add a group for each and every CDN-based file.  For instance, here's my current code:

 Html.Telerik.ScriptRegistrar.Scripts(Function(s) s.AddGroup("CDN-jQuery", Function(g) g _
     .ContentDeliveryNetworkUrl("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js")))
 Html.Telerik.ScriptRegistrar.Scripts(Function(s) s.AddGroup("CDN-jQuery-UI", Function(g) g _
     .ContentDeliveryNetworkUrl("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js")))

But are you saying I can maybe do something like this:

            Html.Telerik.ScriptRegistrar.Scripts(Function(s) s.AddGroup("CDN-jQuery", Function(g) g _
                .ContentDeliveryNetworkUrl("http://ajax.googleapis.com/ajax/libs/") _
                .Add("jquery/1.3.2/jquery.min.js") _
                .Add("jqueryui/1.7.2/jquery-ui-min.js")))

I didn't even think to try that; based on what I've seen so far it doesn't seem like that would work, but are you saying it would?

Thanks,
Patrick

[Kelly Stuard]

My appologies for taking so long to get back. I, myself, have been trying to get it to work how the documentation says.

It's my understanding that the following should work:

Html.Telerik().ScriptRegistrar()
        .Scripts(s=>s
            .AddGroup("google", g=>g
                .ContentDeliveryNetworkUrl("http://ajax.googleapis.com/ajax/libs/")
                .Add("j1.js")
                .Add("j2.js")
            )
            .AddGroup("microsoft", g=>g
                .ContentDeliveryNetworkUrl("http://www.microsoft.com/")
                .Add("j3.js")
                .Add("j4.js")
                .Add("j5.js")
            )
        )

You should then have 5 script references output on the page. However, I get the following:

<script type="text/javascript" src="/Scripts2/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/"></script>
<script type="text/javascript" src="http://www.microsoft.com/"></script>

I think this is due to the following code snippets in "Telerik.Web.Mvc.UI.WebAssetItemMerger.Merge()":

WebAssetItemGroup itemGroup = item as WebAssetItemGroup;
...
if ((itemGroup != null) && itemGroup.Enabled)
            {
                if (!string.IsNullOrEmpty(itemGroup.ContentDeliveryNetworkUrl))
                {
                    mergedList.Add(itemGroup.ContentDeliveryNetworkUrl);
                    continue;
                }

It seems to me that in that if case you should be doing a foreach loop to add the "ContentDeliveryNetworkUrl" + scriptUrl for each entry in the group, instead of one entry that points to the Url. I'm a little confused (as is the parent of this post) as to if we are using this method the wrong way.

[Kelly Stuard]

Upgraded to version 2009.3.1320. Still an issue.

[Kelly Stuard]

I think I've figured out where this is in the source and what to do to fix it. What's the policy on submitting patches?

[Kazi Manzur Rashid]

Hello Kelly Stuard and Patrick Barranis,

The ordering depending on in which order it has been registered. In case of you css registration issue you should register the global first then the page speicific styles. Please also note that the StylesheetManager does not support multiple declaration like the ScriptRegistrar. So I would suggest you add the page level styles programatically depending upon the page that it is serving.

When CDN is used both the registrars assumes that the url containes a merged version of the items that are added in a group, so it ignores the files which are mentioned in the group and only renders url that is mentioned as the CDN url.

Kind regards,
Kazi Manzur Rashid
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Patrick Barranis]

Hi Kazi,

Thanks for your help.  However, I'm still unclear on how StylesheetManager determines order when there are multiple groups.  Are the groups rendered in the order in which added, and in each group the files are rendered in the order they were added?

Regardless, I hope you'll consider adding some clear way of forcing order in a future version (i.e. Insert or AddAtTop, etc).

Also, on the CDN issue, I don't think it's at all clear that it would work the way you're suggesting.  Google's CDN is by far the most common, and I don't know of any way to get "combined" files from them (for, say, jquery and jquery-ui).

However, if you choose to stay with the current design, please consider throwing an exception when the ContentDeliveryNetworkUrl method is called if any files have been added to the group (and, converse, if Add is called after ContentDeliveryNetworkUrl has been called/set).

Nonetheless, thanks for your help!
Patrick

[Kazi Manzur Rashid]

Hi Patrick Barranis,

Yes the stylesheet  will be rendered exactly the same order as they are registered.

Obviously there is a room for improvements.

I do not think any of the CDN has the support to combine multiple resource in the same response. In case of jQuery and jQueryUI my suggestion would be to create two separate group.

Regards,
Kazi Manzur Rashid
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.