Inject CSS files from CDN at a specific index

3 posts, 1 answers
  1. Michael
    Michael avatar
    27 posts
    Member since:
    Sep 2010

    Posted 18 May 2017 Link to this post

    My header tag:

    1.<header>
    2.  <link type="text/css" rel="stylesheet" href="../Css/bootstrap.min.css" />
    3.  <link type="text/css" rel="stylesheet" href="../Css/font-awesome.min.css" />
    4.  <link type="text/css" rel="stylesheet" href="../Css/StyleSheet.css" />
    5.  <link type="text/css" rel="stylesheet" href="<%=Configuration.GetSetting("BrandingUrl") %>"  />
    6.</header>

     When I enable CDN in web.config, Telerik css files are added between lines 5 and 6, However I need line 5  (My branding file containing some Telerik overrides) to be the last line.

    I tried using the RadStyleSheetManager which provides ordering capabilities but since lines 2 and 3 are actually fully qualified URLs, I could not find a way to combine URLs and static files using the control. 

    How would I be able to achieve this short of adding each [RadControl].css file I use in my Webform application.

     

  2. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 23 May 2017 Link to this post

    Hi, Michael.

    It's actually quite easy to change the order / specify insertion point for the styles, though not out of the box:

    1) You need to specify a placeholder
    2) You need an additional dummy div at the end of the page
    3) On preprender of that div you find all stylesheets and move them to the placeholder.

    Below is the code listing, but i've also attached the files:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_1110355_Default" %>
     
    <!DOCTYPE html>
    <head runat="server">
        <title>1110355 -- Inject CSS files from CDN at a specific index</title>
        <style>
            .dummy-top {color: inherit}
        </style>
        <asp:PlaceHolder runat="server" ID="plStyles" />
        <style>
            .dummy-bottom {color: inherit}
        </style>
    </head>
    <body>
    <form id="form1" runat="server">
     
        <asp:ScriptManager runat="server" />
        <telerik:RadComboBox runat="server" />
     
        <!-- place this at the end of the page -->
        <div id="lastDiv" runat="server" onprerender="lastDiv_PreRender"></div>
     
    </form>
    </body>
    </html>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
     
    public partial class _1110355_Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
     
        protected void lastDiv_PreRender(object sender, EventArgs e)
        {
            List<HtmlControl> TelerikStyleSheets = new List<HtmlControl>();
     
            foreach ( Control ctrl in Header.Controls ) {
                if (ctrl.GetType().Name == "HtmlLink" && (ctrl as HtmlControl).Attributes["class"] == "Telerik_stylesheet" ) {
                    TelerikStyleSheets.Add( (HtmlControl)ctrl );
                }
            }
     
            TelerikStyleSheets.ForEach( (HtmlControl styleSheet) => {
                Header.Controls.Remove( (Control)styleSheet );
                Header.FindControl("plStyles").Controls.Add((Control)styleSheet);
            });
        }
    }


    Regards,
    Ivan Zhekov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Michael
    Michael avatar
    27 posts
    Member since:
    Sep 2010

    Posted 23 May 2017 in reply to Ivan Zhekov Link to this post

    Thanks Ivan,

     It works as expected. Since I also use master/content pages, I had to add

    var headerSection = ((HtmlControl)sender).Page.Header;

    to get to the controls.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
     
    public partial class _1110355_Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
     
        protected void LastDiv_PreRender(object sender, EventArgs e)
        {
          var headerSection = ((HtmlControl)sender).Page.Header;
          List<HtmlControl> TelerikStyleSheets = new List<HtmlControl>();
     
          foreach (Control ctrl in headerSection.Controls)
          {
            if (ctrl.GetType().Name == "HtmlLink" && (ctrl as HtmlControl).Attributes["class"] == "Telerik_stylesheet")
            {
              TelerikStyleSheets.Add((HtmlControl)ctrl);
            }
          }
     
          TelerikStyleSheets.ForEach((HtmlControl styleSheet) =>
          {
            headerSection.Controls.Remove((Control)styleSheet);
            headerSection.FindControl("plStyles").Controls.Add((Control)styleSheet);
          });
        }
    }
Back to Top