Radsplitter Layout? (need advice)

4 posts, 0 answers
  1. Sertaç Taşdemir
    Sertaç Taşdemir avatar
    2 posts
    Member since:
    Feb 2010

    Posted 04 Oct 2010 Link to this post

    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..
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sertaç Taşdemir
    Sertaç Taşdemir avatar
    2 posts
    Member since:
    Feb 2010

    Posted 07 Oct 2010 Link to this post

    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.

  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 14 Oct 2010 Link to this post

    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
    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
Back to Top