Make width of the toolbar grow based on drag and drop to the right most column

2 posts, 0 answers
  1. Martin
    Martin avatar
    84 posts
    Member since:
    Apr 2009

    Posted 23 Jun 2009 Link to this post

    I have an interesting scenario, which comes to play on PCs with small resolution.
    I have 3 RadDockZones, and the content is placed within the first two.
    I also have a RadToolbar which extands 100%.
    However when user drag and drops it to the 3rd column, the width of the toolbar does not extand to fill up the now created white space. The only way I was able to fix it, but that is not the solution is to set the width to let's say 120%.
    So is there a way, to extand/shrink the RadToolBar based on the drag and dropping that is taking place? Thanks.
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 26 Jun 2009 Link to this post

    Hi Martin,

    I prepared a sample project for you that implements two RadDockZones, one with Width=300px and the other with Width=600px. In the first zone (with Width=300px) there is a dock that contains a ToolBar with the Width property set to 100%. I dragged and dropped the dock in the second zone and the dock together with the toolbar extended to fill up the zone. I also tested it under 800x600 resolution and again everything was fine. Here is the full source code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DockToolbarMovement._Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <div> 
            <telerik:RadDockLayout ID="RadDockLayout2" runat="server"
            </telerik:RadDockLayout> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server"
                <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px" 
                    Style="float: left; margin-right: 20px;"
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px"
                        <ContentTemplate>                  
                                    <telerik:RadToolBar ID="mainToolBar" runat="server" Width="100%"
                                        <Items> 
                                           <telerik:RadToolBarButton Text="1"></telerik:RadToolBarButton> 
                                           <telerik:RadToolBarButton Text="2"></telerik:RadToolBarButton> 
                                        </Items> 
                                    </telerik:RadToolBar> 
                               
                        </ContentTemplate> 
                    </telerik:RadDock> 
                </telerik:RadDockZone> 
                <telerik:RadDockZone ID="RadDockZone2" runat="server" Height="300px" Width="600px" 
                    Style="float: left;"
                </telerik:RadDockZone> 
            </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    In order to reproduce your scenario, can you please open a support ticket and send us the source code of your project and a couple of screenshots when your project is running?

    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top