Telerik ScriptRegistrar and loading jquery scripts in the head

Question

I'm using jquery.curvycorners and typeface in a website and I want to have those scripts loaded in the head of the page (in order to have the page rendered correctly from start).

Now I'm introducing some Telerik components and the ScriptRegistrar is giving me a headache.

It seems it doesn't want to render at two places even if it's two separate groups.

Abbreviated example:

    <% Html.Telerik().ScriptRegistrar().Scripts(s => s
           .AddGroup("Group1", group => group

               // jQuery    
               .Add("jquery-1.4.4.min.js")
               .Add("jquery-ui-1.8.9.custom.min.js")

               // Rounded corners
               .Add("jquery.curvycorners.source.js")

               .Combined(false)
               .Compress(false)
           ))
           .Render();
    %>

</head>
<body id="body">

    <div>

yadda yadda...

    </div>

    <% Html.Telerik().ScriptRegistrar()
            .DefaultGroup(group => group
                .Compress(false)
                .Combined(false))
            .jQuery(false)
            .Render(); %>
</body>
</html>

Should I hand pick those components I really need to load from start and use script tags or are there any way of using the scriptregistrar rendering in two places?

carlbergenhem · Accepted Answer · 2011-03-11 15:23:04Z

3

You shouldn't be loading the ScriptRegistrar in two places. Also, the script registrar should always be at the bottom of the page. If you absolutely need to have javascript references before the ScriptRegistrar you could do the following:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    @Html.Telerik().StyleSheetRegistrar().DefaultGroup(g => g.Add("telerik.common.css").Add("telerik.windows7.css"))
</head>

<body>
    <div class="page">
        ...
    </div>
    @Html.Telerik().ScriptRegistrar().jQuery(false);
</body>
</html>

Otherwise I recommend combining the two at the bottom, disabling the built-in jQuery and add your own in a group like you did above.

answered Mar 11, 2011 at 15:23

carlbergenhem

1,98913 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Carl R Over a year ago

That's what I was afraid of... I really need those scripts on the top of the page. And it would have been nice to have them combined and compressed.

user2173353 Over a year ago

For some reason, I don't always get the scripts at the botton of the page using ScriptRegistrar() and then my treeview doesn't work... :( I wonder what could cause this... So far, I link the telerik JS at the head too. :( I use output caching to some of my controller actions that produce treeviews, perhaps that's it. :(

Luke · Accepted Answer · 2011-05-25 21:51:03Z

0

You can only call Render() once on a page. Try removing the first one.

answered May 25, 2011 at 21:51

Luke

1,9261 gold badge15 silver badges15 bronze badges

1 Comment

Carl R Over a year ago

Exactly, but it's a pity because waiting with loading some scripts makes the page give the impression of loading slower.

Collectives™ on Stack Overflow

Telerik ScriptRegistrar and loading jquery scripts in the head

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related