set heigth & width of dynamicalyy loaded user control accoring to the dock /zone heigth & width.

2 posts, 0 answers
  1. Golu
    Golu avatar
    41 posts
    Member since:
    Dec 2008

    Posted 13 May 2009 Link to this post

    Dear sir,
    I am dynamically create a dock and set dymanically loaded user control on one drodown's seletedIndexchanged.

    control is loaded smoothly but its its not fit in dock...if user control contain a grid then dock shows scroll , how can I fit that user controls accoding to dock, zone heigth & width.

    our codes as follows..
    TestPage.aspx.........
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">
                var currentLoadingPanel = null;
                var currentUpdatedControl = null;
                function RequestStart(sender, args) {
                    currentLoadingPanel = $find("LoadingPanel1");
                    currentUpdatedControl = "TableLayout";
                    currentLoadingPanel.show(currentUpdatedControl);
                }
                function ResponseEnd() {
                    //hide the loading panel and clean up the global variables 
                    if (currentLoadingPanel != null)
                        currentLoadingPanel.hide(currentUpdatedControl);
                    currentUpdatedControl = null;
                    currentLoadingPanel = null;
                } 
               
            </script>

            <script type="text/javascript">
                function DockResizeEnd(dock, args) {
                    alert('resize end');
                }
                function DockResizeStart(dock, args) {
                    alert('resize start');
                }  
            </script>

        </telerik:RadCodeBlock>
    </head>
    <telerik:RadCodeBlock ID="rcb" runat="server">

        <script type="text/javascript" src="Scripts/Vb.js" language="javascript"></script>

        <script type="text/vbscript" src="Scripts/VBFunctions.vbs" language="vbscript"></script>

    </telerik:RadCodeBlock>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnAddDock">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadDockZone1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadDockZone2" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="cmbSelectDock">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadDockZone1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadDockZone2" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
               
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
            Width="75px" Transparency="50">
            <img alt="Refreshing..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                style="border: 0;" />
        </telerik:RadAjaxLoadingPanel>
        <table width="100%" border="0" cellpadding="1" cellspacing="0" class="aspxMainTable">
            <tr>
                <th class="tdMainHeader1">
                    <img alt="Customer" src="Images/dashboard.gif" />
                    Dashboard
                </th>
            </tr>
            <tr>
                <td>
                    <asp:UpdatePanel ID="upCriteria" runat="server">
                        <ContentTemplate>
                            <table width="100%" border="1">
                                <tr>
                                    <td style="width: 15%;">
                                        Customized Dashboard
                                    </td>
                                    <td style="width: 15%;">
                                        <telerik:RadComboBox ID="cmbSelectDock" runat="server" Skin="Office2007" AutoPostBack="true"
                                            OnSelectedIndexChanged="cmbSelectDock_SelectedIndexChanged">
                                            <Items>
                                                <telerik:RadComboBoxItem Selected="true" Text="Select" Value="" />
                                                <telerik:RadComboBoxItem Text="Case Summary" Value="CaseSummaryChart" />
                                                <telerik:RadComboBoxItem Text="Task Summary" Value="TaskSummaryChart" />
                                                <telerik:RadComboBoxItem Text="Pending Tasks" Value="MyTask" />
                                                <telerik:RadComboBoxItem Text="Pending Cases" Value="MyCase" />
                                                <telerik:RadComboBoxItem Text="Overdue Cases" Value="OverdueCases" />
                                            </Items>
                                        </telerik:RadComboBox>
                                    </td>
                                    <td style="width: 15%;">
                                        Select Docking Zone:
                                    </td>
                                    <td style="width: 15%;">
                                        <telerik:RadComboBox ID="cmbZone" runat="server" Skin="Office2007" DataSource="<%#GetZones() %>"
                                            DataTextField="ID" DataValueField="ClientID">
                                        </telerik:RadComboBox>
                                    </td>
                                    <td style="width: 15%;">
                                        <asp:Button ID="btnAddDock" runat="server" Text="Add" Width="100px" OnClick="btnAddDock_Click" />
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:UpdatePanel runat="server" ID="UpdatePanel2">
                        <ContentTemplate>
                            <telerik:RadDockLayout runat="server" ID="rdDockLayout" OnSaveDockLayout="rdDockLayout_SaveDockLayout"
                                OnLoadDockLayout="rdDockLayout_LoadDockLayout" Skin="Office2007">
                                <table id="TableLayout">
                                    <tr>
                                        <td style="width: 50%;">
                                            <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="300" MinHeight="200"
                                                Orientation="Vertical" Style="float: left; margin-right: 15px; background: #f5f4e8;"
                                                Skin="Office2007" FitDocks="true">
                                            </telerik:RadDockZone>
                                       </td>
                                        <td style="width: 50%;">
                                            <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="300" MinHeight="200"
                                                Orientation="Vertical" Style="background: #d5f0fa; float: left;" Skin="Office2007"
                                                FitDocks="true">
                                            </telerik:RadDockZone>
                                        </td>
                                    </tr>
                                </table>
                            </telerik:RadDockLayout>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnAddDock" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                    <asp:UpdatePanel runat="server" ID="UpdatePanel1">
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblMessage" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>

    TestPage.aspx.cs......

    public partial class TestPage_Neha : ThemeBase
    {
        private int _count = 0;
        int i = 0;
        string dockState = "";
        string strDockTag = string.Empty;

        DockStateWS objDockStateWS;
        DataSet dsDataSet;
        List<DockState> stateList;
        StringBuilder serializedList = new StringBuilder();

        protected void Page_Init(object sender, EventArgs e)
        {
            dsDataSet = new DataSet();
            DataTable dt1 = new DataTable();

            // TB_nUserID = 2;//temporary harcoded
            try
            {
                objDockStateWS = new DockStateWS();
                dsDataSet = objDockStateWS.Fetch_Dock_State(0, 2);

                if (Convert.ToInt32(dsDataSet.Tables["Response"].Rows[0]["ResultCode"]) != 0)
                {
                    LogMessage(new Exception(Convert.ToString(dsDataSet.Tables["Response"].Rows[0]["ResultString"])), 1);
                    return;
                }
                else
                {
                    dockState = Convert.ToString(dsDataSet.Tables["DockState"].Rows[0]["dock_state"]);

                    string[] currentDockStates = dockState.Split('|');
                    _count = currentDockStates.Length;

                    //Recreate the docks in order to ensure their proper operation
                    for (int i = 0; i < _count; i++)
                    {
                        if (currentDockStates[i].Trim() != string.Empty)
                        {
                            RadDock dock = CreateRadDockFromState(currentDockStates[i]);
                            rdDockLayout.Controls.Add(dock);
                            //We want to save the dock state every time a dock is moved.
                            CreateSaveStateTrigger(dock);
                            LoadWidget(dock);
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                ScriptManager.RegisterStartupScript(Page, Page.GetType(), "errMsg", "javascript:alert(\"Error:-Method -> 'Page_Init' \\n Description:- \\n" + ex.Message + "\");", true);
                return;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {              
           
            if (!Page.IsPostBack)
            {
                cmbZone.DataBind();
            }
        }

        private List<DockState> CurrentDockStates
        {
            get
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();

                List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesMyPortal"];
                if (Object.Equals(_currentDockStates, null))
                {
                    _currentDockStates = new List<DockState>();
                    Session["CurrentDockStatesMyPortal"] = _currentDockStates;
                }
                return _currentDockStates;
            }
            set
            {
                Session["CurrentDockStatesMyPortal"] = value;
            }
        }

        public ArrayList GetZones()
        {
            ArrayList zones = new ArrayList();

            zones.Add(RadDockZone1);
            zones.Add(RadDockZone2);

            //RadDockZone1.Width = Unit.Percentage(100);
            //RadDockZone2.Width = Unit.Percentage(100);

            //RadDockZone1.Height = Unit.Percentage(400);
            //RadDockZone2.Height = Unit.Percentage(400);

            //RadDockZone1.Width = Unit.Pixel(350);
            //RadDockZone2.Width = Unit.Pixel(350);

            //RadDockZone1.Height = Unit.Pixel(250);
            //RadDockZone2.Height = Unit.Pixel(250);

            return zones;
        }

        protected void rdDockLayout_LoadDockLayout(object sender, DockLayoutEventArgs e)
        {
            DataTable dt = new DataTable();

            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            //Get saved state string from the database - set it to dockState variable for example
            string dockState = "";
            try
            {
                objDockStateWS = new DockStateWS();
                dsDataSet = new DataSet();
                dsDataSet = objDockStateWS.Fetch_Dock_State(0, 2);

                if (Convert.ToInt32(dsDataSet.Tables["Response"].Rows[0]["ResultCode"]) != 0)
                {
                    LogMessage(new Exception(Convert.ToString(dsDataSet.Tables["Response"].Rows[0]["ResultString"])), 1);
                    return;
                }
                else
                {
                    dockState = Convert.ToString(dsDataSet.Tables["DockState"].Rows[0]["dock_state"]);

                    string[] currentDockStates = dockState.Split('|');
                    foreach (string stringState in currentDockStates)
                    {
                        if (stringState.Trim() != string.Empty)
                        {
                            DockState state = serializer.Deserialize<DockState>(stringState);
                            e.Positions[state.UniqueName] = state.DockZoneID;
                            e.Indices[state.UniqueName] = state.Index;
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                LogMessage(ex, 1);
            }
        }

        protected void rdDockLayout_SaveDockLayout(object sender, DockLayoutEventArgs e)
        {
            try
            {
                //--Save Dock states in Database
                System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

                stateList = rdDockLayout.GetRegisteredDocksState();

                while (i < stateList.Count)
                {
                    serializedList.Append(serializer.Serialize(stateList[i]));
                    serializedList.Append("|");
                    i++;
                }
                dockState = serializedList.ToString();
                if (dockState.Trim() != String.Empty)
                {
                    objDockStateWS = new DockStateWS();
                    dsDataSet = new DataSet();
                    dsDataSet = objDockStateWS.Save_Dock_State(0, 2, dockState);

                    if (Convert.ToInt32(dsDataSet.Tables["Response"].Rows[0]["ResultCode"]) != 0)
                    {
                        LogMessage(new Exception(Convert.ToString(dsDataSet.Tables["Response"].Rows[0]["ResultString"])), 1);
                        return;
                    }
                }
            }
            catch (Exception ex)
            {
                LogMessage(ex, 1);
            }
        }

        private RadDock CreateRadDockFromState(string stringState)
        {
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            DockState state = serializer.Deserialize<DockState>(stringState);
            RadDock dock = new RadDock();
            dock.ID = string.Format("RadDock{0}", state.UniqueName);
            dock.ApplyState(state);
            return dock;
        }

        private RadDock CreateRadDock()
        {
            int docksCount = CurrentDockStates.Count;

            RadDock dock = new RadDock();
            dock.DockMode = DockMode.Docked;
            dock.UniqueName = Guid.NewGuid().ToString();
            dock.ID = string.Format("RadDock{0}", dock.UniqueName);
            dock.Title = cmbSelectDock.SelectedItem.Text;
           // dock.Width = Unit.Pixel(350);
           // dock.Height = Unit.Pixel(250);
            dock.Resizable = true;
           
            dock.Commands.Add(new DockCloseCommand());
            dock.Commands.Add(new DockExpandCollapseCommand());
            return dock;
        }

        private void CreateSaveStateTrigger(RadDock dock)
        {
            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;
            }
            string ss = dock.Tag;
            Control widget = LoadControl(dock.Tag);
            dock.ContentContainer.Controls.Add(widget);
        }

        protected void btnAddDock_Click(object sender, EventArgs e)
        {
            try
            {
                if (cmbSelectDock.SelectedValue == "CaseSummaryChart")
                {
                    strDockTag = "UserControls/Case_Summary_CustCateg_Chart.ascx";
                }
                else if (cmbSelectDock.SelectedValue == "TaskSummaryChart")
                {
                    strDockTag = "~/UserControls/Task_Summary_Chart.ascx";
                }
                else if (cmbSelectDock.SelectedValue == "MyTask")
                {
                    strDockTag = "~/UserControls/MyTask.ascx";
                }
                else if (cmbSelectDock.SelectedValue == "MyCase")
                {
                    strDockTag = "~/UserControls/MyCase.ascx";
                }
                else if (cmbSelectDock.SelectedValue == "OverdueCases")
                {
                    strDockTag = "~/UserControls/OverdueCases.ascx";
                }
            }
            catch (Exception ex)
            {
                LogMessage(ex, 1);
            }
            try
            {
                RadDock dock = CreateRadDock();
                //find the target zone and add the new dock there      
                RadDockZone dz = (RadDockZone)FindControl(cmbZone.SelectedItem.Text);
                //dz.Width = Unit.Percentage(50);
                dz.Controls.Add(dock);
                CreateSaveStateTrigger(dock);

                //Load the selected widget in the RadDock control
                //dock.Tag = cmbSelectDock.SelectedValue;
                dock.Tag = strDockTag;
                LoadWidget(dock);
            }
            catch (Exception ex)
            {
                LogMessage(ex, 1);
            }
        }
      
        void LogMessage(Exception e, Int32 param)
        {
            if (param == 1)
            {
                lblMessage.Text = e.Message;
                lblMessage.CssClass = "error";
            }
            else
            {
                lblMessage.Text = e.Message;
                lblMessage.CssClass = "success";
            }
        }
        //--Dynamically loading user controls....
        protected void cmbSelectDock_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            try
            {
                if (cmbSelectDock.SelectedValue == "CaseSummaryChart") //<!--CaseSummaryChart--!>
                {
                    UserControls_Case_Summary_CustCateg_Chart uclCaseSummary_Chart = (UserControls_Case_Summary_CustCateg_Chart)Page.LoadControl("~/UserControls/Case_Summary_CustCateg_Chart.ascx");
                    uclCaseSummary_Chart.SessionID = TB_nSessionID;
                    uclCaseSummary_Chart.LoggedInContactID = TB_nEmployeeID;
                    uclCaseSummary_Chart.LoggedInContactDeptID = TB_nDepartmentID;
                    uclCaseSummary_Chart.LoggedInContactDesigLevel = TB_nDesignationLevel;
                }
                else if (cmbSelectDock.SelectedValue == "TaskSummaryChart") //<!--TaskSummaryChart--!>
                {
                    UserControls_Task_Summary_Chart uclTaskSummary_Chart = (UserControls_Task_Summary_Chart)Page.LoadControl("~/UserControls/Task_Summary_Chart.ascx");
                    uclTaskSummary_Chart.SessionID = TB_nSessionID;
                    uclTaskSummary_Chart.LoggedInContactID = 57;
                    uclTaskSummary_Chart.LoggedInContactDeptID = TB_nDepartmentID;
                    uclTaskSummary_Chart.LoggedInContactAccountID = TB_nAccountID;
                    uclTaskSummary_Chart.GetTaskSummary();
                }
                else if (cmbSelectDock.SelectedValue == "MyTask") //<!--MyTask--!>
                {
                    UserControls_MyTask uclMyTask = (UserControls_MyTask)Page.LoadControl("~/UserControls/MyTask.ascx");
                    uclMyTask.SessionID = TB_nSessionID;
                    uclMyTask.LoggedInContactID = 57;
                    uclMyTask.LoggedInContactDeptID = TB_nDepartmentID;
                    uclMyTask.LoggedInContactDesigLevel = TB_nDesignationLevel;
                }
                else if (cmbSelectDock.SelectedValue == "MyCase") //<!--MyCase--!>
                {
                    UserControls_MyCase uclMyCase = (UserControls_MyCase)Page.LoadControl("~/UserControls/MyCase.ascx");
                    uclMyCase.SessionID = TB_nSessionID;
                    uclMyCase.LoggedInContactID = TB_nEmployeeID;
                    uclMyCase.LoggedInContactDeptID = TB_nDepartmentID;
                    uclMyCase.LoggedInContactDesigLevel = TB_nDesignationLevel;
                }
                else if (cmbSelectDock.SelectedValue == "OverdueCases") //<!--OverdueCases--!>
                {
                    UserControls_OverdueCases uclOverdueCases = (UserControls_OverdueCases)Page.LoadControl("~/UserControls/OverdueCases.ascx");
                    uclOverdueCases.SessionID = TB_nSessionID;
                    uclOverdueCases.LoggedInContactID = TB_nEmployeeID;
                    uclOverdueCases.LoggedInContactDeptID = TB_nDepartmentID;
                    uclOverdueCases.LoggedInContactDesigLevel = TB_nDesignationLevel;
                }
            }
            catch (Exception ex)
            {
                LogMessage(ex, 1);
            }
        }
    }
    thank & regards

     

  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 15 May 2009 Link to this post

    I think that the  RadGrid is with bigger size than the RadDock control - so this is the reason scrolls to appear.
    Try to create a page where you have only a RadDock(without height and width set) and add this RadGrid. RadDock should resize to fit the RadGrid.
    Hope this helps.
Back to Top