Telerik RADEditor Renders Incorrectly When Shown with AJAX

While I am sure this isn't a common problem, I am also sure that I could not be the only one that encountered it. So hopefully the solution below comes to someone's benefit in the future.

I had a RADEditor placed in a panel that was at load-time initially hidden, using server-side code. This means that the RADEditor was never rendered. At a later point, when the user kicked off an event, the server-side code made the panel "visible". Normally this would be an issue, however all this happened using AJAX, in my attempt to speed up page processing and avoid full postbacks.

Well...talk about unexpected results. The first time the RADEditor rendered through an AJAX partial-postback, the RADEditor ended up rendering strangely. In my case, the height was way larger then it should have been, causing it to overlap the controls directly beneath it. Changing the views on the bottom cause the control to immediately snap to the correct height, or if I cause another AJAX partial-postback, it would then render correctly. Obviously this is a problem because end-users would not like or know that those things would fix the problem. End-users want it to work the first time.

Ended up that because the RADEditor didn't render on the initial page-load, the corresponding CSS files were not loaded. When the AJAX partial-postback occurred, it loaded the CSS files, but not in time to the RADEditor to make use of them, causing some unexpected rendering. I figured out which CSS files were missing and forced them to load (using server-side code) at the time of initial page-load. This way, the first time the RADEditor is rendered, the CSS file were already loaded and available to complete the rendering process. Below is the code I used for server-side loading.