Radsplitter Layout? (need advice)

[Sertaç Taşdemir]

hi..

i need some advice on Radsplitter layout.
here is code;

<center>

<telerik:RadSplitter ID="Radsplitter1" runat="server" Height="815px" Width="100%"
                    Skin="Black" PanesBorderSize="0" >
                    <telerik:RadPane ID="floatleftarea" runat="server" Width="22" Locked="True">
                        <telerik:RadSlidingZone ID="LeftSlidingZone" runat="server" Width="22">
                            <telerik:RadSlidingPane ID="RadSlidingPane2" Title="TOOLBAR" runat="server" Width="150"
                                Overlay="True">
                                TOOLBAR
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="LeftSlidingPane1" Title="USER SETTINGS" runat="server"
                                Width="250px" EnableResize="False">
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="LeftSlidingPane2" Title="INFO" runat="server" Overlay="True">
                                INFO</telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadPane ID="content" runat="server">
                        sample content image text etc..... sample content image text etc..... sample content
                        image text etc.....
                    </telerik:RadPane>
                    <telerik:RadPane ID="floatrightarea" runat="server" Width="22">
                        <telerik:RadSlidingZone ID="RightSlidingZone" runat="server" Width="22" SlideDirection="left">
                            <telerik:RadSlidingPane ID="RadSlidingPane6" Title="area" runat="server" Width="150">
                                area
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RightSlidingPane1" Title="area" runat="server" Width="150">
                                area
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RightSlidingPane2" Title="area" runat="server">
                                area
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RightSlidingPane3" Title="area" runat="server"
                                Width="150">
                                area</telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane1" Title="area" runat="server" Width="150">
                                area
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane4" Title="area" runat="server"
                                Width="150">
                                area
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane5" Title="area" runat="server" Width="150">
                                area
                            </telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                </telerik:RadSplitter>

</center>














here is question..

how can i fix the size of content pane ,when press dock button of toolbar sliding zone .i want to content pane 's size fixed.but when i press to any floated sliding panes's dock button ,contentpane size changing.
any fix this?

thanks..

[Tsvetie]

Hi Sertaç Taşdemir,
Basically, in case I understand you correctly, you do not want the splitter to have Width=100%, you want to have:

1. floatleftarea: Width=22px
2. content: fixed width that is dynamically calculated
3. floatrightarea: Width:22px

In order to achieve this result, you should do the following:

1. Remove Width=100% from the splitter definition
2. Calculate the initial width of the splitter dynamically
3. Change the width of the splitter, when you dock the sliding pane
4. Change the width of the splitter back, when you undock the sliding pane

Have a look at the following code fragment:

<head runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <center>
        <script type="text/javascript">
            function OnClientLoad(sender,args)
            {
                sender.resize($telerik.getViewPortSize().width + 6);
            }

            var contentSize = null;
            function GetContentPaneSize(sender,args)
            {
                contentSize = $find("<%= content.ClientID %>").get_width();
            }

            function SetContentPaneSize(sender,args)
            {
                if (contentSize)
                {
                    var splitter = $find("<%= Radsplitter1.ClientID %>");
                    var pane = $find("<%= content.ClientID %>");
                    splitter.resize(splitter.get_width() + (contentSize - pane.get_width()));

                    contentSize = null;
                }
            }
        </script>
        <telerik:RadSplitter ID="Radsplitter1" runat="server" Height="815px" Skin="Black"
            PanesBorderSize="0" Width="800px" OnClientLoad="OnClientLoad">
            <telerik:RadPane ID="floatleftarea" runat="server" Width="22" Locked="true">
                <telerik:RadSlidingZone ID="LeftSlidingZone" runat="server" Width="22">
                    <telerik:RadSlidingPane ID="RadSlidingPane2" Title="TOOLBAR" runat="server" Width="150"
                        Overlay="True" OnClientDocking="GetContentPaneSize" OnClientDocked="SetContentPaneSize"
                        OnClientUndocking="GetContentPaneSize" OnClientUndocked="SetContentPaneSize">
                        TOOLBAR
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="LeftSlidingPane1" Title="USER SETTINGS" runat="server"
                        Width="250px" EnableResize="False">
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="LeftSlidingPane2" Title="INFO" runat="server" Overlay="True">
                        INFO</telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadPane ID="content" runat="server">
                sample content image text etc..... sample content image text etc..... sample content
                image text etc.....
            </telerik:RadPane>
            <telerik:RadPane ID="floatrightarea" runat="server" Width="22" Locked="true">
                <telerik:RadSlidingZone ID="RightSlidingZone" runat="server" Width="22" SlideDirection="left">
                    <telerik:RadSlidingPane ID="RadSlidingPane6" Title="area" runat="server" Width="150">
                        area
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="RightSlidingPane1" Title="area" runat="server" Width="150">
                        area
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="RightSlidingPane2" Title="area" runat="server">
                        area
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="RightSlidingPane3" Title="area" runat="server" Width="150">
                        area</telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="RadSlidingPane1" Title="area" runat="server" Width="150">
                        area
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="RadSlidingPane4" Title="area" runat="server" Width="150">
                        area
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="RadSlidingPane5" Title="area" runat="server" Width="150">
                        area
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </center>
    </form>
</body>

I have attached a test page for your reference as well.

In case I have misunderstood your requirement, please explain in detail what you expect the width of the splitter to be, when:

1. the splitter loads
2. you dock the sliding pane
3. you undock the sliding pane

Regards,
Tsvetie
the Telerik team

[Sertaç Taşdemir]

ok thanks for reply.

i need some advice of radsplitter layout design ..this layout must be suitable all desktop resolutions.(width:100%)but i having trouble with docked and undocked(fixed ... etc) pane's sizes.

images attached : layout - content area - docked - undocked 

docked and undocked images are explains what I want.

thanks.

[Tsvetie]

Hello Sertaç Taşdemir,
In case I understand your requirement correctly, you want to change the behavior of the dock/undock commands. Currently, the dock command makes the sliding pane static on the page. In order to change this behavior, you can execute your own code, when the user clicks the dock/undock buttons and cancel the build-in behavior. For example:

<script type="text/javascript">
    function OnClientLoad(sender,args)
    {
        var slidingPane = $find("<%= RadSlidingPane2.ClientID %>");
        var dockButton = slidingPane.getDockIconElement();
        var undockButton = slidingPane.getUndockIconElement();

        $clearHandlers(dockButton);
        $clearHandlers(undockButton);

        $addHandlers(dockButton, {
            "mouseover" : slidingPane._dockElement_OnMouseOver,
            "mouseout"  : slidingPane._dockElement_OnMouseOut,
            "mousedown" : window.CustomDock
        }, slidingPane);

        $addHandlers(undockButton, {
            "mouseover" : slidingPane._undockElement_OnMouseOver,
            "mouseout"  : slidingPane._undockElement_OnMouseOut,
            "mousedown" : window.CustomUnDock
        }, slidingPane);
    }

    var isDocked = false;
    function CustomDock()
    {
        this.getDockIconElement().parentNode.style.display = "none";
        this.getCollapseIconElement().parentNode.style.display = "none";
        this.getUndockIconElement().parentNode.style.display = "";

        window.isDocked = true;
    }

    function CustomUnDock()
    {
        this.getDockIconElement().parentNode.style.display = "";
        this.getCollapseIconElement().parentNode.style.display = "";
        this.getUndockIconElement().parentNode.style.display = "none";

        window.isDocked = false;

        this.get_parent().collapsePane(this.get_id());
    }

    function OnClientCollapsing(sender,args)
    {
        args.set_cancel(window.isDocked);
    }
</script>
<telerik:RadSplitter ID="Radsplitter1" runat="server" Height="815px" Skin="Black"
    PanesBorderSize="0" Width="100%" OnClientLoad="OnClientLoad">
    <telerik:RadPane ID="floatleftarea" runat="server" Width="22" Locked="true">
        <telerik:RadSlidingZone ID="LeftSlidingZone" runat="server" Width="22">
            <telerik:RadSlidingPane ID="RadSlidingPane2" Title="TOOLBAR" runat="server" Width="150"
                Overlay="True" OnClientCollapsing="OnClientCollapsing">
                TOOLBAR
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="LeftSlidingPane1" Title="USER SETTINGS" runat="server"
                Width="250px" EnableResize="False">
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="LeftSlidingPane2" Title="INFO" runat="server" Overlay="True">
                INFO</telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane ID="content" runat="server">
        sample content image text etc..... sample content image text etc..... sample content
        image text etc.....
    </telerik:RadPane>
    <telerik:RadPane ID="floatrightarea" runat="server" Width="22" Locked="true">
        <telerik:RadSlidingZone ID="RightSlidingZone" runat="server" Width="22" SlideDirection="left">
            <telerik:RadSlidingPane ID="RadSlidingPane6" Title="area" runat="server" Width="150">
                area
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="RightSlidingPane1" Title="area" runat="server" Width="150">
                area
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="RightSlidingPane2" Title="area" runat="server">
                area
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="RightSlidingPane3" Title="area" runat="server" Width="150">
                area</telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="RadSlidingPane1" Title="area" runat="server" Width="150">
                area
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="RadSlidingPane4" Title="area" runat="server" Width="150">
                area
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="RadSlidingPane5" Title="area" runat="server" Width="150">
                area
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
</telerik:RadSplitter>

For additional information on the client-side API of the control, please refer to our online documentation:
http://www.telerik.com/help/aspnet-ajax/splitter_clientsideradslidingpane.html

Sincerely yours,
Tsvetie
the Telerik team