drag and drop columns to chart axis

7 posts, 0 answers
  1. mher
    mher avatar
    3 posts
    Member since:
    Jun 2011

    Posted 21 Jul 2011 Link to this post

    I am trying to implement drag and drop on the radchart. I am able to make it to work when you drop columns on the chart. However I want to only be able to drop on the chart axis (either y or x). is that possible?

    Thanks
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 22 Jul 2011 Link to this post

    Hi Mher,

    The following example demonstrates a similar functionality:

    http://demos.telerik.com/silverlight/#Chart/DragAndDrop

    You can drop the dragged item anywhere on the other chart - area, axis. Would you like to restrict some of these areas? Any additional information will help us better address the question at hand.

    Best wishes,
    Yavor
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. DevCraft banner
  4. mher
    mher avatar
    3 posts
    Member since:
    Jun 2011

    Posted 22 Jul 2011 Link to this post

    Yes I want to restrict drop to only the y or x axis. In addition I want to highlight the axis when mouse is hovered over it.

    I used the telerik event manager to inject a drop event to the Axis like this:

    Telerik.Windows.EventManager.RegisterClassHandler(typeof(AxisX2D), RadDragAndDropManager.DropInfoEvent,
                  new EventHandler<DragDropEventArgs>(XAxis_DropInfo));

    However, this will inject the event on all such objects on the current visual tree.
    so if i have multiple charts on the page the event will fire multiple times.

    Is there any other way to do this? I noticed Infragistic graphs have support for this out of the box.
    They have various mouse events on the chart axis.




  5. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 25 Jul 2011 Link to this post

    Hello Mher,

    Another approach which you can consider is reteplating the Axis which needs modifying. This may look something like this:

    <Style      
                  TargetType="telerik:AxisX2D" >               
                  <Setter Property="Template" >
                      <Setter.Value>
                          <ControlTemplate TargetType="telerik:AxisX2D">
                              <Grid Margin="{TemplateBinding Margin}">
                                  <Grid.RowDefinitions>
                                      <RowDefinition Height="auto" />
                                      <RowDefinition Height="auto" />
                                      <RowDefinition Height="auto" />
                                      <RowDefinition Height="auto" />
                                      <RowDefinition Height="auto" />
                                  </Grid.RowDefinitions>
                                   
                                  <Line x:Name="PART_AxisLine"                                
                                dragDrop:RadDragAndDropManager.AllowDrop="True"      
                                StrokeThickness="20" 
                                Grid.Row="{TemplateBinding InnerPosition}" 
                                MouseMove="PART_AxisLine_MouseEnter"
                                MouseLeave="PART_AxisLine_MouseLeave"                                      
                                Style="{TemplateBinding AxisLineStyle}"
                                VerticalAlignment="{TemplateBinding AxisLineAlignment}" />
                                  <ItemsPresenter Grid.Row="{TemplateBinding InnerPosition}" Visibility="{TemplateBinding AxisTicksVisibility}" />
                                  <telerik:VerticalMinorTicks2D x:Name="PART_MinorTickPoints" 
                                                                Grid.Row="{TemplateBinding InnerPosition}" 
                                                                Visibility="{TemplateBinding AxisMinorTicksVisibility}"
                                                                VerticalAlignment="{TemplateBinding AxisLineAlignment}" />
                                  <telerik:HorizontalAxisLabels2D Grid.Row="2" x:Name="PART_AxisLabels" Visibility="{TemplateBinding AxisLabelsVisibility}" />
                                 
                              </Grid>
                          </ControlTemplate>
                      </Setter.Value>
                  </Setter>
                  <Setter Property="ItemsPanel" >
                      <Setter.Value>
                          <ItemsPanelTemplate >
                              <telerik:AxisXPanel />
                          </ItemsPanelTemplate>
                      </Setter.Value>
                  </Setter>
              </Style>

    Essentially, this style will only allow drop on the xAxis. However, since the drag/drop manager supresses mouse enter/leave events on the elements in the controls, you cannot style the axis once you hover over it.

    All the best,
    Yavor
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  6. Rory
    Rory avatar
    159 posts
    Member since:
    Jul 2007

    Posted 03 Oct 2012 Link to this post

    Hi Yaovr / Telerik Team,
    Do you have an example of the tempalte style for the YAxis? I want to be able to drop items onto the Y Axis Category Label. I currently have a chart that you can drop onto the series but the problem is if the series value is zero there is nothing to drop onto so I need to be able to drop onto the Category Label too.

    Thanks,

    Rory H.
  7. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 05 Oct 2012 Link to this post

    Hi,

    The following topic:

    http://www.telerik.com/help/silverlight/radchart-styling-and-appearance-styling-axes-overview.html

    elaborates on the possible options to style/retemplate different elements of the control. I hope this gets you started properly.

    Kind regards,
    Yavor
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Rory
    Rory avatar
    159 posts
    Member since:
    Jul 2007

    Posted 08 Oct 2012 Link to this post

    Hi Yavor,
     Thanks for you reply. I got a drop to the axis label to work using the following style template.

    <Style TargetType="telerik:AxisLabel2D">
                <Setter Property="dragDrop:RadDragAndDropManager.AllowDrop" Value="True" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="ItemLabelStyle">
                    <Setter.Value>
                        <Style TargetType="TextBlock">
                            <Setter Property="TextAlignment" Value="Center" />
                            <Setter Property="Padding" Value="1" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>


Back to Top
DevCraft banner