Styling the Editor Dialogs

[Stuart Hemming]

I'm trying to automate the registering of CSS files for a skin in an assembly and, for the most part, I've succeeded. The majority of the work is done by the following 2 methods...

public void ApplySkin(Control target)
{
    if (target == null)
    {
        return;
    }
    if (!target.Visible)
    {
        return;
    }
    if (target is ISkinnableControl)
    {
        AvailableSkin skinToUse = AvailableSkins.Find(s => s.Name == Skin);
        if (!skinToUse.IsEmbedded)
        {
            RegisterControlSkin(skinToUse, target.GetType().Name);

            if (target.GetType().Name == "RadEditor")
            {
                RegisterControlSkin(skinToUse, "RadWindow");
                RegisterControlSkin(skinToUse, "RadTabStrip");
                RegisterControlSkin(skinToUse, "RadGrid");
            }
        }
        //TODO: Need to have a flag on each item to determine if it is embedded or not
        ((ISkinnableControl)target).EnableEmbeddedSkins = skinToUse.IsEmbedded;
        ((ISkinnableControl)target).Skin = skinToUse.Name;
    }
    else
    {
        if (target.Controls.Count > 0)
        {
            foreach (Control child in target.Controls)
            {
                ApplySkin(child);
            }
        }
    }
}
void RegisterControlSkin(AvailableSkin Skin, string Control)
{
    RadStyleSheetManager mgr = Page.Master.FindControl("RadStyleSheetManager1") as RadStyleSheetManager;

    string controlName = Control;
    if (Control.StartsWith("Rad"))
    {
        controlName = Control.Remove(0, 3);
    }
    if (!skinnedControls.Contains(controlName))
    {
        string fileName = String.Format("{0}.{1}.{2}.{1}.css", Skin.Assembly, Skin.Name, controlName);
        StyleSheetReference skinRef = new StyleSheetReference(fileName, Skin.Assembly);
        mgr.StyleSheets.Add(skinRef);
        skinnedControls.Add(controlName);
    }
}

What I'm struggling with ATM is skinning of the RadEditor dialogs. You'll see that the ApplySkin() method registers the CSS files for the Grid, Window and TabStrip controls which are used by the dialog, but I am seeing SS1 when I open one of the dialogs.

I suspect that the problem is that the content of the window is using a separate page source and the custom skin items aren't being registered on that page.

How do I get around this?

-- 
Stuart

[Rumen]

Hi Stuart,

The RadWindow based dialogs of RadEditor render their content inside IFRAME elements which are separate documents and they could not copy the styles from the parent page. For that reason we provided the DialogCssFile property, which imports the CSS styles from an external css file in the dialogs' IFRAMEs and applies formatting to the elements inside the dialogs.

You can see the following KB article for more information: Registering an external skin of RadEditor.

Best regards,
Rumen
the Telerik team

[Stuart Hemming]

OK Rumen, thanks for that.

I have a related question though.

I have a custom skin, created using Visual Style Builder and compiled up in to an assembly.

I have a non-visual control that I use on my website's page's masterpage to make sure the relevant skin's .CSS files  - as WebResources - are properly registered. How does that tie-up with what it is that the article you pointed me at requires?

-- 
Stuart

[Stuart Hemming]

I have another question: If I'm using a custom skin, whether or not the skin files are in a DLL, I still need to set the controls inside the dialog to use UseEmbeddedSkins="false", don't I? How do I manage that?

-- 
Stuart

[Rumen]

Hi Stuart,

You should set UseEmbeddedSkins="false" for the controls that you want to use custom skins.

After that create an aspx file that will be loaded by the DialogCssFile property and which will dynamically serve the css webresource files and load them in the RadEditor dialogs. See the attached file for example.

Kind regards,
Rumen
the Telerik team

[Stuart Hemming]

Rumen,

Thanks for getting back to me.

Sadly, I guess I must be too dumb to understand just what it is I'm missing when it comes to getting this to work using compiled skins.

So, I'm raising a support ticket with a sample app to see if I can get some more help. I'll refer back to this thread so don't be surprised if the support ticket lands on your desk! :-)

-- 
Stuart

[Stuart Hemming]

Support ticket : 335937

-- 
Stuart

[Rumen]

Hi Stuart,

I just answered your support ticket. If you like the provided solution you can share it with our community.

Best regards,
Rumen
the Telerik team

[Stuart Hemming]

Rumen, 

I'm just working through your solution now.

I'll report back here when I'm done.

Many thanks.

-- 
Stuart

[Stuart Hemming]

For anyone following this thread, there a still a few issues to be sorted out, but stay tuned; we're getting there.

-- 
Stuart