Theme issue in dynamically loaded Custom Control(Widget) and RadDock - Urgent Help Required

6 posts, 0 answers
  1. Bhavin
    Bhavin avatar
    1 posts
    Member since:
    Sep 2012

    Posted 23 Apr 2010 Link to this post

    Hi,

    I am facing theme issue in Custom Control(Widget) in dynamically loaded RadDocks. What I am doing is creating iGoogle type dashboard. In my dashboard what I am doing is selecting Custom Control(Widget) from dropdown and loading it to RadDockZone dynamically. For this I have 4 static RadDockZones and I am creating RadDock dynamically, loading Widget to Raddock and saving states to database for user personalization. Now the problem is my widgets get lost some parts of style sheet. If I register same Widget to a page then it is working correctly. but in dynamically added RadDock it is not working. Widget controls have RadGrid along with asp controls. and i have not used embedded style of telerik controls, but have created them in App_Theme

    Below is code snap.

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/CRMMaster.Master" 
        AutoEventWireup="True" CodeBehind="Default.aspx.cs" Inherits="CRM.WebApp.Default" 
        StylesheetTheme="Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %> 
    <%@ Register Src="Views/Shared/Controls/Navigation/DashboardGadgetsBox.ascx" TagName="DashboardGadgetsBox" 
        TagPrefix="uc1" %> 
     
    <asp:Content ID="Content1" ContentPlaceHolderID="cphIncludes" runat="server">  
     
        <script type="text/javascript">  
            var zones = [];  
            function MaximizeMinimize(dock, args) {  
     
                if (args.command.get_name() == "MaximizeMinimize") {  
     
                    if (dock.get_dockZoneID() != "ctl00_cphPageContent_RadDockZoneFullMode") {  
     
                        var minimizeZone = $find("ctl00_cphPageContent_RadDockZoneFullMode");  
     
                        //dock.set_width(200);  
                        args.command.set_text("Minimize");  
                        dock.repaint();  
                        zones[dock.get_id()] = dock.get_dockZoneID();  
                        minimizeZone.dock(dock);  
     
                    }  
                    else {  
                        args.command.set_text("Maximize");  
                        $find(zones[dock.get_id()]).dock(dock);  
                    }  
     
                    args.set_cancel(true);  
                }  
            }  
        </script> 
     
    </asp:Content> 
    <asp:Content ID="Content2" ContentPlaceHolderID="cphPageContent" runat="server">  
        <div style="width: 760px; float: left">  
            <div style="width: 780px; float: left;">  
                <div class="pageTitle" style="float: left; width: 300px; vertical-align: middle">  
                    <asp:Literal ID="lblPageTitle" runat="server" Text="Dashboard"></asp:Literal> 
                </div> 
                <div style="float: left; width: 195px; vertical-align: middle">  
                    <asp:ImageButton ID="imgBtnCustomize" runat="server" ImageUrl="~/Views/Shared/Images/dashboard_customize_button.gif" 
                        OnClientClick="return false;" /> 
                    <ajax:PopupControlExtender ID="PopEx_imgBtnCustomize" runat="server" TargetControlID="imgBtnCustomize" 
                        PopupControlID="pnlGadgetsBox" Position="Bottom" /> 
                    <asp:Panel ID="pnlGadgetsBox" runat="server" Style="display: none; z-index: 5000" 
                        CssClass="modalPopup">  
                        <table cellpadding="2" cellspacing="3" class="exportpanelbg">  
                            <tr> 
                                <td> 
                                    <uc1:DashboardGadgetsBox ID="ucDashboardGadgetsBox" runat="server" OnbtnAddToDashboard_Click="btnAddToDashboard_Click" /> 
                                </td> 
                            </tr> 
                        </table> 
                    </asp:Panel> 
                </div> 
                <div style="float: left; width: 10px; vertical-align: middle">  
                    &nbsp;  
                </div> 
                <div style="float: left; width: 263px; vertical-align: middle">  
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Views/Shared/Images/dashboard_date_selection.gif" /> 
                </div> 
            </div> 
            <div style="float: left; height: 20px; width: 760px">  
                &nbsp;  
            </div> 
            <asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="false" UpdateMode="Conditional">  
                <ContentTemplate> 
                    <br /> 
                    <%--<telerik:RadDockLayout runat="server" ID="RadDockLayout1">--%> 
                    <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout" 
                        OnLoadDockLayout="RadDockLayout1_LoadDockLayout">  
                        <div style="padding: 0px 0px 12px 12px">  
                            <div style="width: 760px; float: left">  
                                <div style="width: 760px; float: left;">  
                                    <telerik:RadDockZone runat="server" ID="RadDockZoneFullMode" Orientation="Vertical" 
                                        FitDocks="true" Width="100%" MinHeight="0" BorderWidth="0">  
                                    </telerik:RadDockZone> 
                                </div> 
                                <div style="width: 365px; float: left">  
                                    <div style="width: 365px; float: left">  
                                        <telerik:RadDockZone runat="server" ID="RadDockZone1" Orientation="Vertical" FitDocks="true">  
                                        </telerik:RadDockZone> 
                                    </div> 
                                    <div style="width: 365px; height: 20px; float: left">  
                                    </div> 
                                    <div style="width: 365px; float: left">  
                                        <telerik:RadDockZone runat="server" ID="RadDockZone3" Orientation="Vertical" FitDocks="true">  
                                        </telerik:RadDockZone> 
                                    </div> 
                                </div> 
                                <div style="width: 30px; float: left; height: auto">  
                                    &nbsp;  
                                </div> 
                                <div style="width: 365px; float: left">  
                                    <div style="width: 365px; float: left;">  
                                        <telerik:RadDockZone runat="server" ID="RadDockZone2" Orientation="Vertical" FitDocks="true">  
                                        </telerik:RadDockZone> 
                                    </div> 
                                    <div style="width: 365px; height: 20px; float: left">  
                                    </div> 
                                    <div style="width: 365px; float: left">  
                                        <telerik:RadDockZone runat="server" ID="RadDockZone4" Orientation="Vertical" FitDocks="true">  
                                        </telerik:RadDockZone> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                    </telerik:RadDockLayout> 
                </ContentTemplate> 
                <Triggers> 
                    <asp:AsyncPostBackTrigger ControlID="ucDashboardGadgetsBox" /> 
                </Triggers> 
            </asp:UpdatePanel> 
        </div> 
        <div style="width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;">  
            Hidden UpdatePanel, which is used to help with saving state when minimizing, moving  
            and closing docks. This way the docks state is saved faster (no need to update the  
            docking zones).  
            <%--<asp:UpdatePanel runat="server" ID="UpdatePanel1">  
                <ContentTemplate> 
                </ContentTemplate> 
            </asp:UpdatePanel>--%> 
        </div>      
    </asp:Content> 
     

    using System;  
    using System.Linq;  
    using System.Collections.Generic;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using Telerik.Web.UI;  
    using System.Text;  
    using System.Data.SqlClient;  
    using System.Collections;  
    using System.Configuration;  
    using CRM.Core.Constants;  
    using CRM.Model.Security;  
    using CRM.DataAccess;  
    using System.Data;  
     
    namespace CRM.WebApp  
    {  
        public partial class Default : System.Web.UI.Page  
        {  
            private int _userID;  
            AuthorizationBDto objAuthorizationBDto;  
            DefaultGadgetsDAL objDefaultGadgetsDAL;  
            private string skin = "Sitefinity";         
     
            #region Page Events  
     
            protected void Page_PreInit(object sender, EventArgs e)  
            {  
                WebHelper.WebManager.CheckSessionIsActive();  
                objAuthorizationBDto = (AuthorizationBDto)Session[PageConstants.ssnUserAuthorization];  
                if (objAuthorizationBDto != null)  
                    _userID = objAuthorizationBDto.UserProfile.UserId;  
            }  
     
            public override string StyleSheetTheme  
            {  
                get  
                {  
                    if (HttpContext.Current.Session[PageConstants.ThemeName] == null)  
                    {  
                        return "Default";  
     
                    }  
                    else  
                    {  
                        return HttpContext.Current.Session[PageConstants.ThemeName].ToString();  
                    }  
                }  
            }  
     
            protected void Page_Load(object sender, EventArgs e)  
            {  
     
            }  
     
            protected override void OnInit(EventArgs e)  
            {  
                base.OnInit(e);              
     
                //Recreate the docks in order to ensure their proper operation  
                for (int i = 0; i < CurrentDockStates.Count; i++)  
                {  
                    if (CurrentDockStates[i].Closed == false)  
                    {  
                        RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);  
                        RadDockLayout1.Controls.Add(dock);  
                        CreateSaveStateTrigger(dock);  
                        LoadWidget(dock);                     
                    }  
                }        
             }  
     
            protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)  
            {  
                foreach (DockState state in CurrentDockStates)  
                {  
                    e.Positions[state.UniqueName] = state.DockZoneID;  
                    e.Indices[state.UniqueName] = state.Index;  
                }  
            }  
     
            protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)  
            {  
                List<DockState> stateList = RadDockLayout1.GetRegisteredDocksState();  
                StringBuilder serializedList = new StringBuilder();  
                int i = 0;  
                  
                //   
                ArrayList arrCurrentDockTags = new ArrayList();  
                ArrayList arrClosedDockTags = new ArrayList();  
                //  
     
                while (i < stateList.Count)  
                {  
                    serializedList.Append(stateList[i].ToString());  
                    serializedList.Append("|");                  
     
                    //add tag (Custom Gadget's Path) to array which are not closed.  
                    if (!stateList[i].Closed)  
                    {  
                        arrCurrentDockTags.Add(stateList[i].Tag);  
                    }  
                    else  
                    {  
                        arrClosedDockTags.Add(stateList[i].Tag);  
                    }  
                      
                    i++;  
                }  
     
                //code to hide check box and show label 'Added' in Gadget Box  
                RadGrid rgGadgetsBox = ucDashboardGadgetsBox.GadgetsBoxGrid;  
                for (int j = 0; j < rgGadgetsBox.Items.Count; j++)  
                {  
                    if (arrCurrentDockTags.Contains(rgGadgetsBox.Items[j]["unGadgetUrl"].Text.Trim()))  
                    {  
                        ((CheckBox)rgGadgetsBox.Items[j]["unChkGadget"].FindControl("chkGadget")).Visible = false;  
                        ((Image)rgGadgetsBox.Items[j]["unChkGadget"].FindControl("imgGadget")).Visible = true;  
                    }  
                    else if (arrClosedDockTags.Contains(rgGadgetsBox.Items[j]["unGadgetUrl"].Text.Trim()))  
                    {  
                        ((CheckBox)rgGadgetsBox.Items[j]["unChkGadget"].FindControl("chkGadget")).Visible = true;  
                        ((Image)rgGadgetsBox.Items[j]["unChkGadget"].FindControl("imgGadget")).Visible = false;  
                    }  
                }  
     
                ucDashboardGadgetsBox.UpdatePanelGadgetsBox.Update();  
                  
                string dockState = serializedList.ToString();  
                int Result;  
                if (dockState.Trim() != String.Empty)  
                {  
                    objDefaultGadgetsDAL = new DefaultGadgetsDAL();  
                    Result = objDefaultGadgetsDAL.SaveDashBoardPersonalization(_userID, dockState);  
                }  
     
            }  
     
            #endregion  
     
            #region Gadget Box Events  
            protected void btnAddToDashboard_Click(object sender, EventArgs e)  
            {  
                RadGrid rgGadgetsBox = ucDashboardGadgetsBox.GadgetsBoxGrid;  
     
                string controlname = string.Empty;  
                string controlurl = string.Empty;  
     
                PopEx_imgBtnCustomize.Cancel();  
     
                for (int i = 0; i < rgGadgetsBox.Items.Count; i++)  
                {  
                    if (((CheckBox)rgGadgetsBox.Items[i]["unChkGadget"].FindControl("chkGadget")).Checked == true)  
                    {  
     
                        ((CheckBox)rgGadgetsBox.Items[i]["unChkGadget"].FindControl("chkGadget")).Checked = false;  
     
                        controlname = rgGadgetsBox.Items[i]["unGadgetName"].Text.Trim();  
                        controlurl = rgGadgetsBox.Items[i]["unGadgetUrl"].Text.Trim();  
     
                        RadDock dock = CreateRadDock();  
                        //find the target zone and add the new dock there                      
                        //RadDockZone dz = (RadDockZone)RadDockLayout1.FindControl("RadDockZone1");                      
                        RadDockZone1.Controls.Add(dock);  
                        CreateSaveStateTrigger(dock);  
     
                        //Load the selected widget in the RadDock control                      
                        dock.Tag = controlurl;  
                        dock.Title = controlname;  
                        LoadWidget(dock);  
                    }  
                }  
     
     
            }  
            #endregion  
     
            #region Property  
     
            private List<DockState> CurrentDockStates  
            {  
                get  
                {  
                    //Get saved state string from the database - set it to dockState variable for example   
                    string dockStatesFromDB = "";  
                    objDefaultGadgetsDAL = new DefaultGadgetsDAL();  
                    DataSet ds = new DataSet();  
                    ds = objDefaultGadgetsDAL.FetchDashBoardPersonalization(_userID);  
                    if (ds.Tables[0].Rows.Count > 0)  
                    {  
                        if (ds.Tables[0].Rows[0]["PERSONALIZATION_STATE"] != null)  
                            dockStatesFromDB = ds.Tables[0].Rows[0]["PERSONALIZATION_STATE"].ToString();  
                        else  
                            dockStatesFromDB = "";  
                    }  
                    List<DockState> _currentDockStates = new List<DockState>();  
                    string[] stringStates = dockStatesFromDB.Split('|');  
                    foreach (string stringState in stringStates)  
                    {  
                        if (stringState.Trim() != string.Empty)  
                            _currentDockStates.Add(DockState.Deserialize(stringState));  
                    }  
                    return _currentDockStates;  
                }  
            }  
     
            #endregion  
     
            #region Methods  
     
            public ArrayList GetZones()  
            {  
                ArrayList zones = new ArrayList();  
                zones.Add(RadDockZone1);  
                zones.Add(RadDockZone2);  
                zones.Add(RadDockZone3);  
     
                return zones;  
            }  
     
            private RadDock CreateRadDockFromState(DockState state)  
            {  
                RadDock dock = new RadDock();  
                dock.DockMode = DockMode.Docked;  
                dock.ID = string.Format("RadDock{0}", state.UniqueName);  
                dock.Skin = skin;  
                dock.EnableEmbeddedSkins = false;  
                dock.CssClass = "dashboard";  
     
                dock.ApplyState(state);  
                dock.Commands.Add(new DockCloseCommand());  
                //dock.Commands.Add(new DockExpandCollapseCommand());  
     
                DockCommand customcommand = new DockCommand();  
                customcommand.OnClientCommand = "MaximizeMinimize";  
                customcommand.Name = "MaximizeMinimize";  
                customcommand.CssClass = "DockMaximize";  
                dock.Commands.Add(customcommand);  
     
                dock.EnableAnimation = true;  
                dock.EnableRoundedCorners = true;  
     
                return dock;  
            }  
     
            private RadDock CreateRadDock()  
            {  
                int docksCount = CurrentDockStates.Count;  
     
                RadDock dock = new RadDock();  
                dock.DockMode = DockMode.Docked;  
                dock.UniqueName = Guid.NewGuid().ToString().Replace('-', 'a');  
                dock.ID = string.Format("RadDock{0}", dock.UniqueName);  
                dock.Skin = skin;  
                dock.EnableEmbeddedSkins = false;  
                dock.CssClass = "dashboard";  
     
                dock.Title = "Dock";  
                dock.Text = string.Format("Added at {0}", DateTime.Now);  
                dock.Width = Unit.Pixel(300);  
                dock.EnableAnimation = true;  
                dock.EnableRoundedCorners = true;  
     
                dock.Commands.Add(new DockCloseCommand());  
                //dock.Commands.Add(new DockExpandCollapseCommand());  
     
                DockCommand customcommand = new DockCommand();  
                customcommand.OnClientCommand = "MaximizeMinimize";  
                customcommand.Name = "MaximizeMinimize";  
                customcommand.CssClass = "DockMaximize";  
                dock.Commands.Add(customcommand);  
     
                return dock;  
            }  
     
            private void CreateSaveStateTrigger(RadDock dock)  
            {  
                //Ensure that the RadDock control will initiate postback  
                // when its position changes on the client or any of the commands is clicked.  
                //Using the trigger we will "ajaxify" that postback.  
                dock.AutoPostBack = true;  
                dock.CommandsAutoPostBack = true;  
     
                AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();  
                saveStateTrigger.ControlID = dock.ID;  
                saveStateTrigger.EventName = "DockPositionChanged";  
                UpdatePanel1.Triggers.Add(saveStateTrigger);  
     
                saveStateTrigger = new AsyncPostBackTrigger();  
                saveStateTrigger.ControlID = dock.ID;  
                saveStateTrigger.EventName = "Command";  
                UpdatePanel1.Triggers.Add(saveStateTrigger);  
            }  
     
            private void LoadWidget(RadDock dock)  
            {  
                if (string.IsNullOrEmpty(dock.Tag))  
                {  
                    return;  
                }  
                Control widget = LoadControl(dock.Tag);  
                  
                dock.ContentContainer.Controls.Add(widget);  
            }  
     
            #endregion          
     
        }  
    }  
     

    Can anyone help me to sort out this issue ?

  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 26 Apr 2010 Link to this post

    Hi Bhavin,

    I tested your code in a sample application that I created, and it seems to work without a problem. Here is what I did:
    • In the App_Themes folder I created a Theme named "Default"
    • In this Theme I created a Skins folder, in which the custom skins will be residing
    • I copied the files for the "Hay" (built-in) Skin and pasted them in the Skins folder
    • I renamed the "Hay" to "skin"
    • After running the application, the docks added had a custom skin.

    The project is attached to the thread. Please let me know in case you have problems. It would help us a lot if you can send fully working sample project.


    Sincerely yours,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. test
    test avatar
    5 posts
    Member since:
    May 2011

    Posted 17 May 2013 Link to this post

    HI,

    I have a default.aspx page and I have set of user controls say Control1.ascx and Control2.ascx so on.
    I am loading this user control through an Ajax - (Web service call).This ajax call is made from the default.aspx page.
    on "pageLoad()" - Javascript.

    This web service returns me the constructed usercontrol html tags,Which I am appending it to a div tag client side(Jquery

    Append).

    Problem:

    When I append,I see that Control1.ascx contains a RadCalender control.On border I see "corner round" image missing.

    Please help me out how to resolve it.


    Thanks...
  5. test
    test avatar
    5 posts
    Member since:
    May 2011

    Posted 17 May 2013 Link to this post

    HI,

    I have a default.aspx page and I have set of user controls say Control1.ascx and Control2.ascx so on.
    I am loading this user control through an Ajax - (Web service call).This ajax call is made from the default.aspx page.
    on "pageLoad()" - Javascript.

    This web service returns me the constructed usercontrol html tags,Which I am appending it to a div tag client side(Jquery

    Append).

    Problem:

    When I append,I see that Control1.ascx contains a RadCalender control.On border I see "corner round" image missing.

    Please help me out how to resolve it.


    Thanks...
  6. test
    test avatar
    5 posts
    Member since:
    May 2011

    Posted 17 May 2013 Link to this post

    HI,

    I have a default.aspx page and I have set of user controls say Control1.ascx and Control2.ascx so on.
    I am loading this user control through an Ajax - (Web service call).This ajax call is made from the default.aspx page.
    on "pageLoad()" - Javascript.

    This web service returns me the constructed usercontrol html tags,Which I am appending it to a div tag client side(Jquery

    Append).

    Problem:

    When I append,I see that Control1.ascx contains a RadCalender control.On border I see "corner round" image missing.

    Please help me out how to resolve it.


    Thanks...
  7. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 21 May 2013 Link to this post

    Hi,

    Please provide a more detailed description of the way you load the user controls with web service, because I am not quite sure of your setup. If possible open a support ticket and send a simple, fully runnable sample so that I can inspect it locally and provide a more to the point answer.

    Also, the skin of the RadDocks in the screenshot appears to be a custom one. Please check if the paths to the background images you have specified in the custom stylesheets are correct.

    Kind regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017