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

[Bhavin]

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 ?

[Pero]

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.

[test]

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...

[test]

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...

[test]

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...

[Slav]

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