This is a migrated thread and some comments may be shown as answers.

Radsplitter Layout? (need advice)

3 Answers 119 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Sertaç Taşdemir
Top achievements
Rank 1
Sertaç Taşdemir asked on 04 Oct 2010, 09:49 AM
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..

3 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 06 Oct 2010, 12:52 PM
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
0
Sertaç Taşdemir
Top achievements
Rank 1
answered on 07 Oct 2010, 11:10 AM

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.

0
Tsvetie
Telerik team
answered on 14 Oct 2010, 09:47 AM
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
Tags
Splitter
Asked by
Sertaç Taşdemir
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Sertaç Taşdemir
Top achievements
Rank 1
Share this question
or