This is a migrated thread and some comments may be shown as answers.

drag and drop columns to chart axis

6 Answers 45 Views
Chart
This is a migrated thread and some comments may be shown as answers.
mher
Top achievements
Rank 1
mher asked on 21 Jul 2011, 05:04 PM
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

6 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 22 Jul 2011, 08:24 AM
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!

0
mher
Top achievements
Rank 1
answered on 22 Jul 2011, 03:52 PM
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.




0
Yavor
Telerik team
answered on 25 Jul 2011, 11:48 AM
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!

0
Rory
Top achievements
Rank 1
answered on 03 Oct 2012, 04:44 PM
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.
0
Yavor
Telerik team
answered on 05 Oct 2012, 09:39 AM
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.

0
Rory
Top achievements
Rank 1
answered on 08 Oct 2012, 04:23 PM
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>


Tags
Chart
Asked by
mher
Top achievements
Rank 1
Answers by
Yavor
Telerik team
mher
Top achievements
Rank 1
Rory
Top achievements
Rank 1
Share this question
or