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

Inject CSS files from CDN at a specific index

2 Answers 558 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 2
Michael asked on 18 May 2017, 05:11 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Zhekov
Telerik team
answered on 23 May 2017, 08:12 AM
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.
0
Michael
Top achievements
Rank 2
answered on 23 May 2017, 01:35 PM

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);
      });
    }
}
Tags
General Discussions
Asked by
Michael
Top achievements
Rank 2
Answers by
Ivan Zhekov
Telerik team
Michael
Top achievements
Rank 2
Share this question
or