Drag expander on page

4 posts, 0 answers
  1. sharp
    sharp avatar
    27 posts
    Member since:
    Feb 2011

    Posted 17 Jan 2012 Link to this post

    I have expander. when Page load it placed on top page. But when they expanded I want drag it to right page side.
    How can I do this without using RadDocing?
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 17 Jan 2012 Link to this post

    Hi Sharp,

    Currently this functionality is not supported out of the box. What you can try and do is after the expander has expanded, set HorizontalAlignment to Right and ExpandDirection to Left. Let me know how it goes.

    All the best,
    Kiril Stanoev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. sharp
    sharp avatar
    27 posts
    Member since:
    Feb 2011

    Posted 18 Jan 2012 Link to this post

    I'm tryng using
    MouseDragElementBehavior
    from this post
    http://kiwigis.blogspot.com/2011/08/how-to-add-mouse-drag-behavior-in.html
    but not working
    I know, I can do like you sad(set HorizontalAlignment to Right and ExpandDirection to Left) but user must drag this control.
    If I can't do this with this control can I do this with other control? I try use RadDocing bbut when tab unpined they place panel, My client dont want see this panel. they want see page and only one shortcut without panel for this element.
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 20 Jan 2012 Link to this post

    Hi Sharp,

     I prepared a project for you that meets your requirement and it uses the Telerik's DragDropManager.
    In order to allow the drag and drop operation you have to set:
    1) AllowDrag on the Expander

    <telerik:RadExpander x:Name="expander"
                               Width="200"
                               Height="500"
                            2)   Background="LightBlue"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Top"
                               telerik:DragDropManager.AllowDrag="True"
    2) AllowDrag on the Expander's Header by editing the default Template:
    <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="col0" Width="Auto"/>
                                <ColumnDefinition x:Name="col1" Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition x:Name="row0" Height="Auto"/>
                                <RowDefinition x:Name="row1" Height="Auto"/>
                            </Grid.RowDefinitions>
                            <telerik:RadToggleButton x:Name="HeaderButton" telerik:DragDropManager.AllowDrag="True" Background="Transparent" ClickMode="{TemplateBinding ClickMode}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalHeaderAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" TabIndex="{TemplateBinding TabIndex}" Template="{StaticResource ToggleTemplate}" VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}" VerticalContentAlignment="{TemplateBinding VerticalHeaderAlignment}">
                                <Grid x:Name="HeaderPanel" Background="Transparent">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
    3)AllowDrop on the Container that hold the Expander:
    <Grid x:Name="LayoutRoot" Background="White" AllowDrop="True">
     
           <telerik:RadExpander x:Name="expander"
                                Width="200"
                                Height="500"
    4)And you also need to set up the DragInitialize and Drop events, for example like so:
    public MainPage()
           {
               InitializeComponent();
               DragDropManager.AddDragInitializeHandler(this.expander, new DragInitializeEventHandler(OnDragInitialized),true); 
               DragDropManager.AddDropHandler(this.LayoutRoot, OnElementDrop, true);
           }
     
           private void OnDragInitialized(object sender, DragInitializeEventArgs e)
           {
               e.DragVisual = new RadExpander() { Header = this.expander.Header.ToString() };
               e.AllowedEffects = DragDropEffects.All;
           }
     
           private void OnElementDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
           {
               Point dropPoint = e.GetPosition(this.LayoutRoot);
               if (dropPoint.X > this.LayoutRoot.ActualWidth / 2)
               {
                   this.expander.HorizontalAlignment = HorizontalAlignment.Right;
               }
               else
               {
                   this.expander.HorizontalAlignment = HorizontalAlignment.Left;
               }
           }
    The described approach is realized in the attached solution. Please check it out and let us know how it goes.

    Kind regards,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top