[Solved] Issue setting the z-index of an item in a multi-series chart

[Ruby Jean]

Hi,

I have a multi-series chart that when an item is clicked from any of that series, that item will be brought forward. I followed the sample in this URL (http://www.telerik.com/help/silverlight/radchart-howto-control-the-series_items-overlapping-via-zindex-property.html) in setting the item Z-index but nothing happened. Also, instead of using the ChartArea_SelectionChanged, as in the example, I used it on ChartArea_ItemClick. 
 

Here’s my sample code:

void ChartArea_ItemClick(object sender, ChartItemClickEventArgs e)
        {
            var pointMarks = RadChart.DefaultView.ChartArea.ChildrenOfType<PointMark>().ToList<PointMark>();
            var rangeBars = RadChart.DefaultView.ChartArea.ChildrenOfType<RangeBar>().ToList<RangeBar>();

            foreach (PointMark pointMark in pointMarks)
                pointMark.ClearValue(Canvas.ZIndexProperty);

            foreach (RangeBar rangeBar in rangeBars)
                rangeBar.ClearValue(Canvas.ZIndexProperty);

            PointMark selectedPointMark = pointMarks.Where(x => x.DataContext == e.DataPoint).SingleOrDefault();
            RangeBar selectedRangeBar = rangeBars.Where(x => x.DataContext == e.DataPoint).SingleOrDefault();

            if (selectedPointMark != null)
            {
                Canvas.SetZIndex(selectedPointMark, 1000);
            }
            else if (selectedRangeBar != null)
            {
                Canvas.SetZIndex(selectedRangeBar, 1000);
            }
        }

Did I miss anything here? Thanks in advance for the help.  

Cheers,

Byang Fernando

[Petar Marchev]

Hello Byang,

The name of the topic (the link you have provided) is "Control the Series Items overlapping via ZIndex property". It describes how to avoid (control) items overlapping, for items in one series. You can not achieve the scenario you describe because the items of one series reside in one panel and the items of another series reside in another panel. The ZIndex is only valid for elements in the same panel.

May be you can use the Opacity of the items instead:

void ChartArea_ItemClick(object sender, ChartItemClickEventArgs e)
{
 var pointMarks = RadChart.DefaultView.ChartArea.ChildrenOfType<PointMark>().ToList<PointMark>();
 var rangeBars = RadChart.DefaultView.ChartArea.ChildrenOfType<RangeBar>().ToList<RangeBar>();

 foreach (PointMark pointMark in pointMarks)
  pointMark.Opacity = 0.5;

 foreach (RangeBar rangeBar in rangeBars)
  rangeBar.Opacity = 0.5;

 PointMark selectedPointMark = pointMarks.Where(x => x.DataContext == e.DataPoint).SingleOrDefault();
 RangeBar selectedRangeBar = rangeBars.Where(x => x.DataContext == e.DataPoint).SingleOrDefault();

 if (selectedPointMark != null)
  selectedPointMark.Opacity = 1;
 else if (selectedRangeBar != null)
  selectedRangeBar.Opacity = 1;
}

 
All the best,
Petar Marchev
the Telerik team

[Ruby Jean]

Thanks for the quick response and the work around provided however the requirement is strictly for the item to be brought forward.

From the reply you mentioned that each series reside in one panel. Is it possible then to set the ZIndex of that panel? So, instead of only one item from the series to be brought forward, the entire items of the series will be brought forward. I actually tried doing this by getting all the LinearSeriesPanel and BarSeriesPanel associated in each series and then I set their ZIndex appropriately however, nothing happened. If I can do this then I can set the ZIndex of the item I want to be brought forward, similar to the sample provided.

Any help is much appreciated. 

Thanks,
Byang Fernando

[Petar Marchev]

Hi Byang,

Setting the ZIndex to the BarSeriesPanel did not work because of the same reason. The BarSeriesPanel resides in a panel (Series). I have attached a snapshot of a project's visual tree for you to see. You might find the parent (of type Series) of the selected item and set its ZIndex (say 2000). This should work:

var series = selectedRangeBar.ParentOfType<Series>();
Canvas.SetZIndex(series, 1234);

All the best,
Petar Marchev
the Telerik team

[Ruby Jean]

That works like a charm! Couldn't be much happier. Thanks so much!

Cheers,
Byang Fernando