RadOpen RenderMode and Skins

[Rudy]

Please Help, How if using RadOpen in javascript to change the Render Mode and Skin?

[Marin Bratanov]

Hello Rudy,

This is impossible.

To have RadWindows with different skins, you must have these skins registered on the page and this happens when a control has its Skin attribute set accordingly in the markup. You can have several RadWindows defined with different skins, but ones generated on the fly via RadWindowManager will have its skin.

As for the render mode - only one is supported on any given page: http://www.telerik.com/help/aspnet-ajax/window-render-modes.html. Thus, all RadWindows and RadWindowManagers must have the same value set.

Here is an example of having different skins, with comments that show what will happen with each API call:

<form id="form1" runat="server">
    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Windows7">
        <Windows>
            <telerik:RadWindow ID="RadWindow1" runat="server" Skin="Black" Title="Black skin"></telerik:RadWindow>
            <telerik:RadWindow ID="RadWindow2" runat="server" Skin="Metro" Title="Metro"></telerik:RadWindow>
            <telerik:RadWindow ID="RadWindow3" runat="server" Title="Windows7"></telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <script>
        function pageLoad() {
            radopen(null, "RadWindow1");//will open RadWindow1 with Black skin
            radopen(null, "RadWindow2");//will open RadWindow2 with Metro skin
            radopen(null, "RadWindow3");//will open RadWindow3 with Windows7 skin
            radopen(null, "someDynamicRadWindow");//will open a dynamic RadWindow with Windows7 skin
        }
    </script>
</form>

Regards,

Marin Bratanov
Telerik

 

 

[Rudy]

Thanks marin, but I have tried successfully to skin but rendermode still does not work, I use radwindow within radwindow, this is my source:

 web.config:

 <appSettings>
    <add key="Telerik.Skin" value="Vista"/>
    <add key="Telerik.Window.Skin" value="WebBlue" />
    <add key="Telerik.Web.UI.Window.RenderMode" value="lightweight" />
    <add key="Telerik.EnableEmbeddedSkins" value="true" />
    <add key="Telerik.EnableEmbeddedBaseStylesheet" value="true"/>
    <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled"/>
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled"/>
  </appSettings>
 
popup.aspx:

        <form id="popup" runat="server" style="background-color:silver;width:674px; height: 632px;">
              <asp:Button runat="server" id="case_solution" Text="Add Case/Solution"  OnClick="case_solution_Click" Font-Names="Arial" Font-Size="8pt" />

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow)
                oWindow = window.radWindow; else if (window.frameElement.radWindow)
                    oWindow = window.frameElement.radWindow; return oWindow;
        }

        function radwindowpop(url) {
           var oBrowserWnd = GetRadWindow().BrowserWindow;
            var parentRadWindowManager = oBrowserWnd.GetRadWindowManager();
     
            //parentRadWindowManager.set_reloadOnShow(true);
            parentRadWindowManager.setSize(534, 410);
            parentRadWindowManager.set_behaviors(Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Close);
            parentRadWindowManager.set_title("<b>CASE and Solution</b>");
            parentRadWindowManager.set_visibleStatusbar(false);
            parentRadWindowManager.set_overlay(true);
            parentRadWindowManager.set_enableShadow(false);
            parentRadWindowManager.set_visibleTitlebar(true);
            parentRadWindowManager.set_autoSize(false);
            parentRadWindowManager.set_modal(true);
 
            var newWin = parentRadWindowManager.open(url, "RadWindow1");
            newWin.firstDialogReference = GetRadWindow();
            
            newWin.setActive(true);
            
        }
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableEmbeddedSkins="true" Skin="Vista" Height="63px">
        <Windows>
            <telerik:RadWindow ID="RadWindow1" runat="server" Skin="Metro" RenderMode="Lightweight" Title="Black skin"></telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
     </form>

popup.aspx.cs:

                 ClientScript.RegisterStartupScript(this.GetType(), "openpopup2", "radwindowpop('www.google.com');", true);

 

 

 

 

 

[Danail Vasilev]

Hello Rudy,

I am not able to reproduce the mentioned issue. After modifying a little bit the JavaScript that opens the window it renders like this - http://screencast.com/t/RsczmrDXn0

I can suggest that you try the following steps:
   - Can you ensure that all of the controls on the page have the same rendering?
   - If you are not using latest Telerik UI - 2015.1.401, does upgrading to it helps?
   - Does removing all of the styles on the page help? If that is so you can start turning them piece by piece until you find the problematic rule. More information is available here - http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-distorted-appearance.html

I have also attached the test page. If the above steps do not help can you please reproduce the issue with the attached sample and then tell us what changes you have made, so that I can proceed further with the investigation?

Regards,
Danail Vasilev
Telerik