开发者

Telerik tabstrib doesn't work when jquery ui is used

开发者 https://www.devze.com 2023-01-18 22:51 出处:网络
Ive got the following code in my site.master page: <head runat=\"server\"> <title><asp:ContentPlaceHolder ID=\"TitleContent\" runat=\"server\" /></title>

Ive got the following code in my site.master page:

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon" />

    <%--<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>--%>
    <script src="../../Scripts/ckeditor/ckeditor.js" type="text/javascript"></script>

<%--    <script src="../../Scripts/Telerik/telerik.common.min.js" type="text/javascript"></script>
    <script src="../../Scripts/Telerik/telerik.tabstrip.min.js" type="text/javascript"></script>--%>

    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/jquery-ui.css" rel="stylesheet" type="text/css" />

    <%= Html.Telerik().StyleSheetRegistrar()
                       .DefaultGroup(g => g
                       //.Add("Site.css")
                       .Add("telerik.common.css")
                       .Add("telerik.windows7.css")
                       .Combined(true)
                       .Compress(true))
    %>
</head>

And at the开发者_如何学Python end of the site.master i have the following code;

<% Html.Telerik().ScriptRegistrar()
                 .DefaultGroup(group => group
                     .UseTelerikContentDeliveryNetwork(true)
                     .Combined(true)
                     .Compress(true)
                  )
                 .Render(); %>

    <%--<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>--%>
    <script src="../../Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>

With this setup my telerik tabstrip is being rendered correctly and i'm able to navigate through the tabs. However on a different page (using the same site.master) i want to use jquery UI to render datepickers, but this doesnt work. After enabling the following rule to the head of my site.master

<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

and removing the part below from the bottom of my site.master, i'm able to use the datepickers. But then navigating the tabstip doesn't work. Though all the tabs are rendered correctly.

<% Html.Telerik().ScriptRegistrar()
                 .DefaultGroup(group => group
                     .UseTelerikContentDeliveryNetwork(true)
                     .Combined(true)
                     .Compress(true)
                  )
                 .Render(); %>

How can i use both? It seems to me that somehow when i use the telerik CDN i get something totally different then when i disable this. I've already downloaded all the parts belonging to Telerik, but even when i add those to my header i can't get it to work correctly.

Which files downloaded from telerik do i need to implement to be able to use the tabstrip without using the CDN from telerik? And how can i run this next to the jquery UI without any problems?


Solved the problem by creating my own scriptregistrar. After that i added a custom section to my web.config where i could embed the scripts i needed. This works like a charm and i even can chang the sequence of scripts loaded.

This is new in the web.config;

<sectionGroup name="telerik">
      <section name="webAssets" type="Telerik.Web.Mvc.Configuration.WebAssetConfigurationSection, Telerik.Web.Mvc"/>
    </sectionGroup>

<telerik>
    <webAssets useTelerikContentDeliveryNetwork="false">
      <scripts>
        <add name="DefaultScripts" version="2010.07.20.1" combined="false" compress="false" enabled="true" cacheDurationInDays="365">
          <items>
            <add source="ckeditor/ckeditor.js"/>
            <add source="ckeditor/adapters/jquery.js" />

            <add source="Telerik-min/telerik.common.min.js" />
            <add source="Telerik-min/telerik.tabstrip.min.js" />

            <add source="jquery-ui-1.8.5.custom.min.js" />
          </items>
        </add>
      </scripts>
      <styleSheets>
        <add name="CoreStyles" version="2010.10.05.01" combined="true" compress="true" enabled="true" cacheDurationInDays="7">
          <items>
            <add source="Site.css" />
            <add source="jquery-ui.css" />
            <add source ="telerik.common.css"/>
            <add source ="telerik.telerik.css"/>
            <add source ="telerik.windows7.css"/>
          </items>
        </add>
      </styleSheets>
    </webAssets>
  </telerik>

In code i can now use the following two rules for javascript and style sheets

<%=Html.Telerik().ScriptRegistrar().Scripts(scripts => scripts.AddSharedGroup("DefaultScripts"))%>

and

Html.Telerik().StyleSheetRegistrar().StyleSheets(stylesheets => stylesheets.AddSharedGroup("CoreStyles"))
0

精彩评论

暂无评论...
验证码 换一张
取 消