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

Inject CSS files from CDN at a specific index

2 Answers 587 Views

General Discussions

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

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

Accepted

answered on 23 May 2017, 08:12 AM

1110355----Inject-CSS-files-from-CDN-at-a-specific-index.zip

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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" />

<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.

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);

});

}