Add Buttons to Re-Order Modal

[Justin]

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

[Deyan]

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