Load UserControl ascx on expand

[Michael Diaz]

Hello;

I currently have a window with multiple slidingpanes on it. Each pane can contain elements which also have the potential to display in other panes. Essentially we've done this to allow the user to select where they want to see certain data and save their prefereances. I've written some functions to block the user from opening the same tab(or view) in multiple panes. What I'd like to do now is have the onClientExpanded call a server side method which will load an ascx file into the expanded pane.

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Start.aspx.cs" Inherits="Start"
    MasterPageFile="~/MAIN/MasterPage.master" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content_Start" ContentPlaceHolderID="Main" runat="Server">
    <telerik:RadScriptBlock runat="server" ID="radScriptBlock">

        <script type="text/javascript">

            // Arrays used to store dynamic panes.
            arrWhereUsed = new Array("slidepaneWhereUsedLBL", "slidepaneWhereUsedLBR", "slidepaneWhereUsedTRT", "slidepaneWhereUsedBRB");
            arrChildGrid = new Array("slidepaneChildGridLBL", "slidepaneChildGridLBR", "slidepaneChildGridTRT", "slidepaneChildGridBRB");
            arrInventory = new Array("slidepaneInventoryLBL", "slidepaneInventoryLBR", "slidepaneInventoryTRT", "slidepaneInventoryBRB");
            arrMasterParts = new Array("slidepaneMasterPartsListLBL", "slidepaneMasterPartsListLBR", "slidepaneMasterPartsListTRT", "slidepaneMasterPartsListBRB");
            arrDownLook = new Array("slidepaneDownLookTRT", "slidepaneDownLookBRB");
            arrPricingActuals = new Array("slidepanePricingActualsLBL", "slidepanePricingActualsLBR");

            /// <summary>
            /// Resize panes before they're expanded so that they fill their panel.
            /// </summary>
            function ResizeBeforeExpand(sender, Args) {
                var slidePane = sender.get_id();
                var parentPane = sender.get_parentPane();
                sender.set_height(parentPane.get_height() - 18);
                sender.set_width(parentPane.get_width());
            }

            /// <summary>
            /// Hide or show tabs based on whether or not one of that type is already shown.
            /// </summary>
            /// <param name="callingpane">string: name of pane making the call.</param>
            /// <param name="arrSliders">array: of sliders to hide or show. Arrays defined above.</param>
            /// <param name="expandcollapse">int: 1 = Expand, 2 = Collapse, 3 = Dock, 4 = Undock </param>
            function EnableDisableSliders(callingpane, arrSliders, action) {

                for (ix = 0; ix < arrSliders.length; ix++) {

                    // Get panelocation for current item in array.
                    var panelocation = arrSliders[ix].slice(arrSliders[ix].length - 3, arrSliders[ix].length);

                    // Check panelocation to determine what we should do.
                    switch (panelocation) {
                        case "LBL":

                            // Initialize SlidingZones.
                            var slidezoneLBL = $find("<%= slidezoneLBL.ClientID %>");

                            // Get sliding pane.
                            var slidepane = slidezoneLBL.getPaneById("ctl00_Main_" + arrSliders[ix]);
                            var sliderId = slidepane.get_id();

                            // If the paneIds match we need to leave it alone and possibly resize.
                            // If not then we need to disable the pane.
                            if (action == 1 || action == 4) {
                                if (sliderId == callingpane) {

                                    // Get parentpane object.
                                    var parentpane = slidepane.get_parentPane();
                                    slidepane.set_height(parentpane.get_height());
                                    slidepane.set_width(parentpane.get_width());

                                    // Set maxHeight and maxWidth equal to current height/ width plus 75%.
                                    var maxHeight = parentpane.get_height() + (parentpane.get_height() * .75);
                                    var maxWidth = parentpane.get_width() + (parentpane.get_width() * .75);

                                    // Set parentPane size.
                                    parentpane.set_maxHeight(maxHeight);
                                    parentpane.set_maxWidth(maxWidth);

                                    slidepane.ShowTab("ctl00_Main_" + arrSliders[ix]);
                                    slidepane.ajaxRequest("ExpandPane")
                                }
                                else {
                                    slidepane.HideTab("ctl00_Main_" + arrSliders[ix]);
                                }
                            }
                            else {
                                slidepane.ShowTab("ctl00_Main_" + arrSliders[ix]);
                            }

                            break;

                        case "LBR":

                            // Initialize SlidingZones.
                            var slidezoneLBR = $find("<%= slidezoneLBR.ClientID %>");
                            // Get sliding pane.
                            var slidepane = slidezoneLBR.getPaneById("ctl00_Main_" + arrSliders[ix]);
                            var sliderId = slidepane.get_id();

                            // If the paneIds match we need to leave it alone and possibly resize.
                            // If not then we need to disable the pane.
                            if (action == 1 || action == 4) {
                                if (sliderId == callingpane) {

                                    // Get parentpane object.
                                    var parentpane = slidepane.get_parentPane();
                                    slidepane.set_height(parentpane.get_height());
                                    slidepane.set_width(parentpane.get_width());

                                    // Set maxHeight and maxWidth equal to current height/ width plus 75%.
                                    var maxHeight = parentpane.get_height() + (parentpane.get_height() * .75);
                                    var maxWidth = parentpane.get_width() + (parentpane.get_width() * .75);

                                    // Set parentPane size.
                                    parentpane.set_maxHeight(maxHeight);
                                    parentpane.set_maxWidth(maxWidth);

                                    slidepane.ShowTab("ctl00_Main_" + arrSliders[ix]);
                                }
                                else {
                                    slidepane.HideTab("ctl00_Main_" + arrSliders[ix]);
                                }
                            }
                            else {
                                slidepane.ShowTab("ctl00_Main_" + arrSliders[ix]);
                            }
                            break;

                        case "TRT":

                            // Initialize SlidingZones.
                            var slidezoneTRT = $find("<%= slidezoneTRT.ClientID %>");
                            // Get sliding pane.
                            var slidepane = slidezoneTRT.getPaneById("ctl00_Main_" + arrSliders[ix]);
                            var sliderId = slidepane.get_id();

                            // If the paneIds match we need to leave it alone and possibly resize.
                            // If not then we need to disable the pane.
                            if (action == 1 || action == 4) {
                                if (sliderId == callingpane) {

                                    // Get parentpane object.
                                    var parentpane = slidepane.get_parentPane();
                                    slidepane.set_height(parentpane.get_height());
                                    slidepane.set_width(parentpane.get_width());

                                    // Set maxHeight and maxWidth equal to current height/ width plus 75%.
                                    var maxHeight = parentpane.get_height() + (parentpane.get_height() * .75);
                                    var maxWidth = parentpane.get_width() + (parentpane.get_width() * .75);

                                    // Set parentPane size.
                                    parentpane.set_maxHeight(maxHeight);
                                    parentpane.set_maxWidth(maxWidth);

                                    slidepane.ShowTab("ctl00_Main_" + arrSliders[ix]);
                                }
                                else {
                                    slidepane.HideTab("ctl00_Main_" + arrSliders[ix]);
                                }
                            }
                            else {
                                slidepane.ShowTab("ctl00_Main_" + arrSliders[ix]);
                            }
                            break;

                        case "BRB":

                            // Initialize SlidingZones.
                            var slidezoneBRB = $find("<%= slidezoneBRB.ClientID %>");
                            // Get sliding pane.
                            var slidepane = slidezoneBRB.getPaneById("ctl00_Main_" + arrSliders[ix]);
                            var sliderId = slidepane.get_id();

                            // If the paneIds match we need to leave it alone and possibly resize.
                            // If not then we need to disable the pane.
                            if (action == 1 || action == 4) {
                                if (sliderId == callingpane) {

                                    // Get parentpane object.
                                    var parentpane = slidepane.get_parentPane();
                                    slidepane.set_height(parentpane.get_height());
                                    slidepane.set_width(parentpane.get_width());

                                    // Set maxHeight and maxWidth equal to current height/ width plus 75%.
                                    var maxHeight = parentpane.get_height() + (parentpane.get_height() * .75);
                                    var maxWidth = parentpane.get_width() + (parentpane.get_width() * .75);

                                    // Set parentPane size.
                                    parentpane.set_maxHeight(maxHeight);
                                    parentpane.set_maxWidth(maxWidth);

                                    slidepane.ShowTab("ctl00_Main_" + arrSliders[ix]);
                                }
                                else {
                                    slidepane.HideTab("ctl00_Main_" + arrSliders[ix]);
                                }
                            }
                            else {
                                slidepane.ShowTab("ctl00_Main_" + arrSliders[ix]);
                            }
                            break;
                    }
                }
            }

            /// <summary>
            /// Handles expanding of pane. Hides all other tabs with same name.
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="eventArgs"></param>
            function PaneExpanded(sender, eventArgs) {

                // Get pane from sender arguement.
                var pane = sender;
                callingPane = pane.get_id();

                // Get originating control name by taking off the first 20 and last 3 characters.
                controlname = new String(callingPane.slice(20, callingPane.length - 3));

                // Call Disable method based on the calling pane and the appropriate array.
                switch (controlname.toLowerCase()) {
                    case "whereused":
                        EnableDisableSliders(callingPane, arrWhereUsed, 1);
                        break;
                    case "childgrid":
                        EnableDisableSliders(callingPane, arrChildGrid, 1);
                        break;
                    case "inventory":
                        EnableDisableSliders(callingPane, arrInventory, 1);
                        break;
                    case "masterpartslist":
                        EnableDisableSliders(callingPane, arrMasterParts, 1);
                        break;
                    case "downlook":
                        EnableDisableSliders(callingPane, arrDownLook, 1);
                        break;
                    case "PricingActuals":
                        EnableDisableSliders(callingPane, arrPricingActuals, 1);
                        break;
                }
            }

            /// <summary>
            /// Handles collapsing of pane. Shows all other tabs with same name.
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="eventArgs"></param>
            function PaneCollapsed(sender, eventArgs) {

                // Get pane from sender arguement.
                var pane = sender;
                callingPane = pane.get_id();

                // Get originating control name by taking off the first 20 and last 3 characters.
                controlname = new String(callingPane.slice(20, callingPane.length - 3));

                // Call Disable method based on the calling pane and the appropriate array.
                switch (controlname.toLowerCase()) {
                    case "whereused":
                        EnableDisableSliders(callingPane, arrWhereUsed, 0);
                        break;
                    case "childgrid":
                        EnableDisableSliders(callingPane, arrChildGrid, 0);
                        break;
                    case "inventory":
                        EnableDisableSliders(callingPane, arrInventory, 0);
                        break;
                    case "masterpartslist":
                        EnableDisableSliders(callingPane, arrMasterParts, 0);
                        break;
                    case "downlook":
                        EnableDisableSliders(callingPane, arrDownLook, 0);
                        break;
                    case "PricingActuals":
                        EnableDisableSliders(callingPane, arrPricingActuals, 0);
                        break;
                }
            }

            /// <summary>
            /// Handles docking of pane. Hides all other tabs with same name.
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="eventArgs"></param>
            function PaneDocked(sender, eventArgs) {

                // Get pane from sender arguement.
                var pane = sender;
                callingPane = pane.get_id();

                // Get originating control name by taking off the first 20 and last 3 characters.
                controlname = new String(callingPane.slice(20, callingPane.length - 3));

                // Call Disable method based on the calling pane and the appropriate array.
                switch (controlname.toLowerCase()) {
                    case "whereused":
                        EnableDisableSliders(callingPane, arrWhereUsed, 1);
                        break;
                    case "childgrid":
                        EnableDisableSliders(callingPane, arrChildGrid, 1);
                        break;
                    case "inventory":
                        EnableDisableSliders(callingPane, arrInventory, 1);
                        break;
                    case "masterpartslist":
                        EnableDisableSliders(callingPane, arrMasterParts, 1);
                        break;
                    case "downlook":
                        EnableDisableSliders(callingPane, arrDownLook, 1);
                        break;
                    case "PricingActuals":
                        EnableDisableSliders(callingPane, arrPricingActuals, 1);
                        break;
                }
            }

            /// <summary>
            /// Handles undocking of pane. Hides all other tabs with same name.
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="eventArgs"></param>
            function PaneUndocked(sender, eventArgs) {

                // Get pane from sender arguement.
                var pane = sender;
                callingPane = pane.get_id();

                // Get originating control name by taking off the first 20 and last 3 characters.
                controlname = new String(callingPane.slice(20, callingPane.length - 3));

                // Call Disable method based on the calling pane and the appropriate array.
                switch (controlname.toLowerCase()) {
                    case "whereused":
                        EnableDisableSliders(callingPane, arrWhereUsed, 1);
                        break;
                    case "childgrid":
                        EnableDisableSliders(callingPane, arrChildGrid, 1);
                        break;
                    case "inventory":
                        EnableDisableSliders(callingPane, arrInventory, 1);
                        break;
                    case "masterpartslist":
                        EnableDisableSliders(callingPane, arrMasterParts, 1);
                        break;
                    case "downlook":
                        EnableDisableSliders(callingPane, arrDownLook, 1);
                        break;
                    case "PricingActuals":
                        EnableDisableSliders(callingPane, arrPricingActuals, 1);
                        break;
                }
            }


        </script>

        <%-- Hides title bar for each slider --%>
        <style type="text/css">
            .rspSlideHeaderIconWrapper, .rspSlideTitleContainer
            {
                display: none !important;
            }
            .rspSlideTitle, .rspSlideTitleContainer
            {
                background-image: none !important;
                height: 1px !important;
            }
        </style>

    </telerik:RadScriptBlock>
    <telerik:RadSplitter ID="splitterMain" runat="server" Orientation="Vertical" Width="100%"
        Height="100%">
        <%--BEGIN: Left Side Pane - ToolBar, TreeView, LeftBottomLeft, RightBottomRight--%>
        <telerik:RadPane ID="paneLeftSide" runat="server" Width="70%" Height="100%">
            <telerik:RadSplitter ID="splitterLeftHorizontal" runat="server" Orientation="Horizontal"
                Width="100%" Height="100%">
                <telerik:RadPane ID="paneLeftTop" runat="server" Height="75%">
                    <telerik:RadSplitter ID="splitterToolBarTree" runat="server" Orientation="Horizontal"
                        Width="100%" Height="100%">
                        <%-- BEGIN: LeftTopToolBar - ToolBar --%>
                        <telerik:RadPane ID="paneToolBar" runat="server" Height="100px">
                        </telerik:RadPane>
                        <%-- END: LeftTopToolBar - ToolBar --%>
                        <%-- BEGIN: LeftTopTreeView - TreeView  --%>
                        <telerik:RadPane ID="paneTree" runat="server">
                        </telerik:RadPane>
                        <%-- END: LeftTopTreeView - TreeView  --%>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="splitbarLeftHoriz" runat="server" />
                <telerik:RadPane ID="paneLeftBottom" runat="server" Height="25%">
                    <telerik:RadSplitter ID="splitterLeftBottom" runat="server" Orientation="Vertical"
                        Width="100%" Height="100%">
                        <%-- BEGIN: LeftBottomLeft - Dynamic Controls  --%>
                        <telerik:RadPane ID="paneLeftBottomLeft" runat="server" Width="50%" Height="100%"
                            Scrolling="None">
                            <telerik:RadSlidingZone ID="slidezoneLBL" runat="server" ClickToOpen="True"
                                SlideDirection="Bottom">
                                <telerik:RadSlidingPane ID="slidepaneChildGridLBL" runat="server" Title="Child Grid"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelChildGridLBL" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="slidepaneWhereUsedLBL" runat="server" Title="Where Used"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelWhereUsedLBL" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="slidepaneInventoryLBL" runat="server" Title="Inventory"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelInventoryLBL" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="slidepaneMasterPartsListLBL" runat="server" Title="Master Parts List"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelMasterPartsListLBL" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="slidepanePricingActualsLBL" runat="server" Title="Pricing Actuals"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelPricingActualsLBL" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                            </telerik:RadSlidingZone>
                        </telerik:RadPane>
                        <%-- END: LeftBottomLeft - Dynamic Controls  --%>
                        <telerik:RadSplitBar ID="splitbarLeftBottomVSplitter" runat="server" />
                        <%-- BEGIN: LeftBottomRight - Dynamic Controls  --%>
                        <telerik:RadPane ID="paneLeftBottomRight" runat="server" Width="50%" Height="100%"
                            Scrolling="None">
                            <telerik:RadSlidingZone ID="slidezoneLBR" runat="server" ClickToOpen="True" SlideDirection="Bottom">
                                <telerik:RadSlidingPane ID="slidepaneChildGridLBR" runat="server" Title="Child Grid"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelChildGridLBR" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="slidepaneWhereUsedLBR" runat="server" Title="Where Used"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelWhereUsedLBR" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="slidepaneInventoryLBR" runat="server" Title="Inventory"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelInventoryLBR" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="slidepaneMasterPartsListLBR" runat="server" Title="Master Parts List"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelMasterPartsListLBR" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="slidepanePricingActualsLBR" runat="server" Title="Pricing Actuals"
                                    OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                                    EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                                    OnClientUndocked="PaneUndocked">
                                    <asp:Panel ID="panelPricingActualsLBR" runat="server">
                                    </asp:Panel>
                                </telerik:RadSlidingPane>
                            </telerik:RadSlidingZone>
                        </telerik:RadPane>
                        <%-- END: LeftBottomRight - Dynamic Controls  --%>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
        <%--END: Left Side Pane - ToolBar, TreeView, LeftBottomLeft, RightBottomRight--%>
        <telerik:RadSplitBar ID="splitbarRightToLeft" runat="server" />
        <telerik:RadPane ID="paneRight" runat="server" Width="30%">
            <telerik:RadSplitter ID="splitterTopRightHoriz" runat="server" Orientation="Horizontal"
                Width="100%" Height="100%">
                <%-- BEGIN: RightTop - Dynamic Controls  --%>
                <telerik:RadPane ID="paneTopRightTop" runat="server" Height="50%" Scrolling="None">
                    <telerik:RadSlidingZone ID="slidezoneTRT" runat="server" ClickToOpen="True" SlideDirection="Bottom">
                        <telerik:RadSlidingPane ID="slidepaneChildGridTRT" runat="server" Title="Child Grid"
                            OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelChildGridTRT" runat="server">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="slidepaneWhereUsedTRT" runat="server" Title="Where Used"
                            OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelWhereUsedTRT" runat="server">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="slidepaneInventoryTRT" runat="server" Title="Inventory"
                            OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelInventoryTRT" runat="server">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="slidepaneMasterPartsListTRT" runat="server" Title="Master Parts List"
                            OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelMasterPartsListTRT" runat="server">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="slidepaneDownLookTRT" runat="server" Title="DownLook"
                            OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelDownLookTRT" runat="server">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
                <%-- END: RightTop - Dynamic Controls  --%>
                <telerik:RadSplitBar ID="splitbarTRHoriz" runat="server" />
                <%-- BEGIN: RightBottom - Dynamic Controls  --%>
                <telerik:RadPane ID="paneTopRightBottom" runat="server" Height="50%" Scrolling="None">
                    <telerik:RadSlidingZone ID="slidezoneBRB" runat="server" ClickToOpen="True" SlideDirection="Bottom"
                        SkinID="Office2007">
                        <telerik:RadSlidingPane ID="slidepaneChildGridBRB" runat="server" Title="Child Grid"
                            OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelChildGridBRB" runat="server" Height="100%" Width="100%">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="slidepaneWhereUsedBRB" runat="server" Title="Where Used"
                            OnClientBeforeExpand="ResizeBeforeExpand"
                            OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelWhereUsedBRB" runat="server" Height="100%" Width="100%">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="slidepaneInventoryBRB" runat="server" Title="Inventory"
                            OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelInventoryBRB" runat="server" Height="100%" Width="100%">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="slidepaneMasterPartsListBRB" runat="server" Title="Master Parts List"
                            OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelMasterPartsListBRB" runat="server" Height="100%" Width="100%">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="slidepaneDownLookBRB" runat="server" Title="DownLook"
                            OnClientBeforeExpand="ResizeBeforeExpand" OnClientCollapsed="PaneCollapsed" Scrolling="None"
                            EnableDock="false" OnClientExpanded="PaneExpanded" OnClientDocked="PaneDocked"
                            OnClientUndocked="PaneUndocked">
                            <asp:Panel ID="panelDownLookBRB" runat="server" Height="100%" Width="100%">
                            </asp:Panel>
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
                <%-- END: RightBottom - Dynamic Controls  --%>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
</asp:Content>

[Svetlina Anati]

Hi Michael Diaz,

 I already answered your otyher thread and for your convenience I pasted my reply below:

 I prepared a KB article which explains how to achieve the desired result and also contains a sample, fully runnable demo. You can find it below:

http://www.telerik.com/support/kb/aspnet-ajax/splitter/load-on-demand-radslidingpane.aspx

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michael Diaz]

Svetlina;

Thank you for your prompt response. The problem I'm having now is that since these controls can pop up in one of 4 slidingpanes, I've had to make a panel in each slidingpane and designate it as the caller at runtime. In the code below expandedPanel is equal to the client id of the panel the control should be loaded into.

 

 

 

if (!sender._loaded) {

 

 

// Get panelId to pass off to serverside code. Format(<DIV id=ctl00_Main_panelChildGridLBL OnAjaxRequest="LoadControlIntoPane"></DIV>)

 

 

var expandedPanel = sender.getContent().slice(sender.getContent().indexOf("=") + 1, sender.getContent().indexOf(" On"));

 

expandedPanel.ajaxRequest();

sender._loaded =

true;

 

}

 

 I've also tried doing this
 $find("<%=" + expandedPanel + " %>").ajaxRequest();
but it also does not work. Any suggestions on how to get the panelid within the pane being expanded dynamically?

[Svetlina Anati]

Hi Michael Diaz,

I am not sure I understood you correctly but as far as I understood, you need to get the client id of the pane in the handler. If so, you can extract it by using the get_id method, e.g as sender.get_id().

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.