[Solved] MouseEnter MouseLeave for each/individual Bar

[Oscar]

Hello

<Style x:Name="CustomStyle" TargetType="telerik:Bar">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="telerik:Bar">
                                <Grid>
                                    <Rectangle x:Name="PART_DefiningGeometry"
                                               RadiusX="5"
                                               RadiusY="5"
                                               StrokeThickness="2"
                                               Fill="{Binding DataItem.StatusReturningColorBrush}"  MouseEnter="content_MouseEnter" MouseLeave="content_MouseLeave" />

                                </Grid>

                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="telerik:Bar">
                                <Canvas x:Name="PART_CanvasContainer" Opacity="0" MouseEnter="content_MouseEnter" MouseLeave="content_MouseLeave">
                                </Canvas>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>

Mouse Enter  and Mouse Leave never executes, is as if they are not there

the following works
ItemToolTipOpening="ChartArea_ItemToolTipOpening" ItemToolTipClosing="ChartArea_ItemToolTipClosing"

but I wonder
How could i have or do Mouse Events for each bar ( I need to pop up a tooltip with different values for each bar, for example )

Regards

[Missing User]

Hello Oscar,

You need to retemplate the default Bar Style and set the MouseEnter and MouseLeave events in it. You can achive this as followed:

<UserControl.Resources>
    <Style x:Key="CustomStyle" TargetType="telerik:Bar">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerik:Bar">
                    <Canvas Opacity="0" x:Name="PART_MainContainer">
                        <Rectangle x:Name="PART_DefiningGeometry"
                                   Height="{TemplateBinding ItemActualHeight}"
                                   Width="{TemplateBinding ItemActualWidth}"
                                   Style="{TemplateBinding ItemStyle}"
                                   RadiusX="5"
                                   RadiusY="5"
                                   MouseEnter="content_MouseEnter"
                                   MouseLeave="content_MouseLeave"/>

                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                        </Canvas.RenderTransform>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

Mouse events code behind:

public void content_MouseEnter(object sender, MouseEventArgs e)
{
    //Put some logic here
}

public void content_MouseLeave(object sender, MouseEventArgs e)
{
    //Put some logic here
}

Notice that you need to set the retemplated style as a new style for the BarSeriesDefinition.ItemStyle :

SeriesMapping barSeries = new SeriesMapping();
barSeries.SeriesDefinition = new BarSeriesDefinition()
{
    ItemStyle = this.Resources["CustomStyle"] as Style
};

You can also use the default ToolTip functionality provided by RadChart. In this case you can set a custom tooltip content for each bar in the ChartArea_ItemToolTipOpening event.
For example:

radChart1.DefaultView.ChartArea.ItemToolTipOpening += new ItemToolTipEventHandler(ChartArea_ItemToolTipOpening);

...

private void ChartArea_ItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs e)
{
    //for example you can use the e.ItemIndex to take the index of the bar in the series

    tooltip.Content = "custom text";
}

You can also review this help topic about Customizing Tooltip Content.

Best wishes,

Polina

the Telerik team

[James]

I have implemented the code exactaly as shown, and again I never get the mouse_in/mouse_out events to fire...

Given the code you have here I do get a single bar to highlight and it gets some default tooltip behavior....   The challenge I am having is as follows.

Bar chart.  Mouse over a single bar needs to raise a mouse event so I can draw a custom tooltip that might stay open forever....

Any reason you can think of that even in this simple example the mouse in events just never fire?

[Missing User]

Hi James,

I prepared a sample project which demonstrates the implementation of MouseEnter and MouseLeave events. You can find it in the attached file. I hope this helps.

Regards,

Polina

the Telerik team

[Oscar]

Hello Polina

the on Mouse events work on your sample, unfortunately when I do exactly the same on our real application, the events are never triggered. we updated to your last builds too.
is very odd

Regards

[Missing User]

Hi Oscar,

Could you please open a formal support ticket and send us a runnable sample project that we can investigate locally and give you an appropriate solution. You can also provide more information about the way you setup the RadChart control and implement this functionality.

Regards,

Polina

the Telerik team