Add Buttons to Re-Order Modal

2 posts, 0 answers
  1. Justin
    Justin avatar
    7 posts
    Member since:
    Feb 2013

    Posted 18 Jul 2013 Link to this post

    Hi, I was wondering if its possible to add buttons to the re-order modal i the DataBoundListBox. By default it shows an up and down arrow, I would like to extend this to have a "Pin" and "Remove" button.

    Thanks!
    Justin
  2. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 22 Jul 2013 Link to this post

    Hi Justin,

    Thanks for writing and for your question.

    You can extract the default template of the ItemReorderControl used to display the reorder buttons and change it so that it contains the additional components you require. I am pasting this style here for your convenience:

    <Style TargetType="telerikListBox:ItemReorderControl">
           <Setter Property="ShiftDownButtonStyle" Value="{StaticResource ShiftDownButtonStyle}"/>
           <Setter Property="ShiftUpButtonStyle" Value="{StaticResource ShiftUpButtonStyle}"/>
           <Setter Property="Background" Value="#00ffffff"/>
           <Setter Property="HorizontalAlignment" Value="Right"/>
           <Setter Property="VerticalAlignment" Value="Bottom"/>
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="telerikListBox:ItemReorderControl">
                       <Border x:Name="PART_LayoutRoot"
                               BorderThickness="{TemplateBinding BorderThickness}"
                               BorderBrush="{TemplateBinding BorderBrush}"
                               Background="{TemplateBinding Background}">
                           <VisualStateManager.VisualStateGroups>
                                   <VisualStateGroup x:Name="ListBoxOrientationStates">
                                       <VisualState x:Name="Vertical">
                                           <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ButtonMoveUp" Storyboard.TargetProperty="(Grid.Column)">
                                               <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoveUpButtonRotate" Storyboard.TargetProperty="Angle">
                                               <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ButtonMoveDown" Storyboard.TargetProperty="(Grid.Column)">
                                               <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoveDownButtonRotate" Storyboard.TargetProperty="Angle">
                                               <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                       </VisualState>
                                       <VisualState x:Name="Horizontal">
                                           <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ButtonMoveUp" Storyboard.TargetProperty="(Grid.Column)">
                                               <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoveUpButtonRotate" Storyboard.TargetProperty="Angle">
                                               <DiscreteObjectKeyFrame KeyTime="0" Value="-90"/>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ButtonMoveDown" Storyboard.TargetProperty="(Grid.Column)">
                                               <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoveDownButtonRotate" Storyboard.TargetProperty="Angle">
                                               <DiscreteObjectKeyFrame KeyTime="0" Value="-90"/>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                       </VisualState>
                                   </VisualStateGroup>
                               </VisualStateManager.VisualStateGroups>
                           <Grid x:Name="ButtonsGrid">
                               <Grid.ColumnDefinitions>
                                   <ColumnDefinition Width="Auto"/>
                                   <ColumnDefinition Width="Auto"/>
                               </Grid.ColumnDefinitions>
                               <telerikPrimitives:RadImageButton
                                   Style="{TemplateBinding ShiftUpButtonStyle}"
                                   x:Name="PART_ButtonMoveUp">
                                   <telerikPrimitives:RadImageButton.RenderTransform>
                                       <RotateTransform x:Name="MoveUpButtonRotate"/>
                                   </telerikPrimitives:RadImageButton.RenderTransform>
                               </telerikPrimitives:RadImageButton>
                               <telerikPrimitives:RadImageButton
                                   x:Name="PART_ButtonMoveDown"
                                   Style="{TemplateBinding ShiftDownButtonStyle}">
                                   <telerikPrimitives:RadImageButton.RenderTransform>
                                       <RotateTransform x:Name="MoveDownButtonRotate"/>
                                   </telerikPrimitives:RadImageButton.RenderTransform>
                               </telerikPrimitives:RadImageButton>
                           </Grid>
                       </Border>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>


    Regards,
    Deyan
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
Back to Top