Error using SquishIt and an Ektron control together

Earlier at work I ran into a conflict between SquishIt (which is a great utility for .Net for concatenating and minifying your CSS and JavaScript files, more info) and an Ektron control (Ajax HTMLEditor) that was included on a .Net ASPX page .  SquishIt was set in the MasterPage, so just removing it for that page wasn’t really an option.

The error I was getting was:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Seems the Ektron control likes to use Control.Add() to inject it’s own CSS/JS into the head of the page, and because of the SquishIt code block, it was throwing that error.  For more information about the underlying issue, see Understanding how <% %>expressions render and why Controls.Add() doesn’t work.

A helpful StackOverflow link sent to me by a coworker led to this link on the Telerik documentation that describes a partial fix, but it was kind of incomplete.

To implement their fix, you need to do two things, first register the Telerik assemby on the page:

 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

Then, add the “telerick:RadCodeBlock” around the SquishIt code block.

 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <%= Bundle.Css()
        .Add("~/css/global.css")
        .Add("~/css/sprites.css")
        .Render("~/css/combinedIOGlobal_#.css")
    %>
</telerik:RadCodeBlock>

By wrapping the code block in the RadCodeBlock, the Ektron control no longer breaks the page.  This solution should work for other types of code blocks beyond SquishIt as well.

The documentation for that solution is pretty lacking, and needed a number of different things pieced together to work (and the genesis for this post, so I could reference it later if I run into the issue again).