[Solved] RadChart Filtering with Checkbox Template

[Fransiscus]

Hi,

I've implemented the logic as the telerik sample http://demos.telerik.com/silverlight/#Chart/SimpleFiltering

Everything are working fine - I've implemented the same Setter template for the checkbox (e.g in this sample "PART_MainContainer")

Problem
-At the moment my charts display 5 legends with check box on each of the legend and each of the legend check box corresponded to the hiding/showing corresponded series line
-By default all those 5 series line are showed and the 5 checkboxes on every legend are checked
-Initially I want to display only just 2 legends and 2 corresponded series line
-At the moment I know how to hide the corresponded series line that I want to hide but I have an issue where i can hide the series line but I can't uncheck the check box beside the legend (I can't get/Don't know how to get the Check Box object from the LegendItem object) (e.g because initially 2 series lines are loaded but 5 check boxes in the legend are checked)

These are my codes
XAML

<Style x:Key="CustomLegendItemStyle" TargetType="telerik:ChartLegendItem">
           <Setter Property="Template" >
               <Setter.Value>
                   <ControlTemplate TargetType="telerik:ChartLegendItem">
                       <Grid x:Name="PART_MainContainer" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,5,0">
                           <Path x:Name="PART_LegendItemMarker"
                                 Height="25"
                                 Width="220"
                                 Style="{TemplateBinding ItemStyle}"
                                 Stretch="Fill">
                               <Path.Data>
                                   <PathGeometry x:Name="PART_ItemMarkerGeometry" />
                               </Path.Data>
                           </Path>
                           <CheckBox IsChecked="True"
                                     VerticalAlignment="Center"
                                     Margin="2,0"
                                     Content="{TemplateBinding Label}"
                                     Foreground="{TemplateBinding Foreground}"
                                     Checked="CheckBox_Checked" Unchecked="CheckBox_Checked" />
                       </Grid>

                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>

These are the code behind that hiding the lines

radChartReport.Loaded  += (o, b) =>
              {
                  var dataSeries = radChartReport.DefaultView.ChartArea.DataSeries.FirstOrDefault();
                  if (dataSeries != null)
                  {
                      foreach (var point in dataSeries.ToList())
                      {
                          for (int i=0;i<point.DataSeries.Count;i++)
                          {
                              ChartLegendItem legendItem = (radChartReport.DefaultView.ChartLegend as Telerik.Windows.Controls.ItemsControl).Items[i] as ChartLegendItem;
                              if (legendItem.Label.ToLower().Contains("importance by affiliation") || legendItem.Label.ToLower().Contains("performance by staff")
                                  || legendItem.Label.ToLower().Contains("importance by manager"))
                              {
                                  //legendItem.Label = "test";
                                  var a = legendItem.Template;
                                  radChartReport.DefaultView.ChartArea.DataSeries[i].Definition.Visibility = SeriesVisibility.Hidden;
                              }
                          }
                       }
                  }
              };

[Fransiscus]

Telerik admin,

Need your help desperately here. I just need to get the checkbox object from the setters template

[Missing User]

Hello Fransiscus,

You can get the CheckBox from the ChartLegendItem by the extension method ChildrenOfType<CheckBox>(), part of the UIElementExtensions Class. In order to use it, you need to include namespace reference to Telerik.Windows.Controls. For example:

...
ChartLegendItem legendItem = (radChartReport.DefaultView.ChartLegend as Telerik.Windows.Controls.ItemsControl).Items[i] as ChartLegendItem;
if (legendItem.Label.ToLower().Contains("importance by affiliation") || legendItem.Label.ToLower().Contains("performance by staff")
    || legendItem.Label.ToLower().Contains("importance by manager"))
{
    radChartReport.DefaultView.ChartArea.DataSeries[i].Definition.Visibility = SeriesVisibility.Hidden;
    CheckBox checkBox = legendItem.ChildrenOfType<CheckBox>().FirstOrDefault();
    if (checkBox != null)
        checkBox.IsChecked = false;
}
...

I hope that this helps.

Kind regards,

Polina

the Telerik team

[Fransiscus]

Hi Polina,

I changed my code slightly a little bit to iterate through legend items instead of datapoint and I also use your code. The checkbox does not return any object, it always return as NULL eventhough the dataseries can be hidden and the legenditem is not null

for (int i=0;i< radChartReport.DefaultView.ChartArea.DataSeries.Count;i++)
                            {
                                ChartLegendItem legendItem = (radChartReport.DefaultView.ChartLegend as Telerik.Windows.Controls.ItemsControl).Items[i] as ChartLegendItem;
                                if (legendItem.Label.ToLower().Contains("importance by affiliation") || legendItem.Label.ToLower().Contains("performance by staff")
                                    || legendItem.Label.ToLower().Contains("importance by manager"))
                                {
                                    CheckBox checkBox = legendItem.ChildrenOfType<CheckBox>().FirstOrDefault();
                                    if (checkBox != null)
                                        checkBox.IsChecked = false;
                                    radChartReport.DefaultView.ChartArea.DataSeries[i].Definition.Visibility = SeriesVisibility.Hidden;
                                }
                            }

[Missing User]

Hi Fransiscus,

For your convenience, I prepared a sample project, based on the Simple Filtering demo and your code snippets. You can find it in the attached file. Basically, you can get the ChartLegendItems, and respectively the CheckBoxes, after the RadChart.DefaultView.ChartArea is loaded. For example:

void ChartArea_Loaded(object sender, RoutedEventArgs e)
{
    var dataSeries = RadChart1.DefaultView.ChartArea.DataSeries;
    if (dataSeries != null)
    {
        for (int i = 0; i < dataSeries.Count; i++)
        {
            ChartLegendItem legendItem =
                (RadChart1.DefaultView.ChartLegend as Telerik.Windows.Controls.ItemsControl).Items[i] as ChartLegendItem;

            if (legendItem.Label.ToLower().Contains("series 3") || legendItem.Label.ToLower().Contains("series 4"))
            {
                dataSeries[i].Definition.Visibility = SeriesVisibility.Hidden;
                CheckBox checkBox = legendItem.ChildrenOfType<CheckBox>().FirstOrDefault();
                if (checkBox != null)
                    checkBox.IsChecked = false;
            }
        }
    }
}

If the issue persists, 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.

Kind regards,
Polina
the Telerik team

[Randy]

I have implemented your Chart Simple Filtering demo with checkboxes.
After the demo code is in place, I click the checkbox and the data series hides & shows but the checkbox stays checked.
Even if I explicitly uncheck it in the code behind.
Same thing for a radtogglebutton, the state of the toggle button will not change even as the data series hides or shows.

<Style x:Key="CustomLegendItemStyle" TargetType="telerik:ChartLegendItem">
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="telerik:ChartLegendItem">
                <Grid x:Name="PART_MainContainer" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,5,0">
                    <StackPanel Orientation="Horizontal" >
                        <telerik:RadToggleButton Width="22" Height="22" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                                                 IsChecked="True"
                                                 Margin="0,1,5,0"
                                                 IsThreeState="False"
                                                 CommandParameter="{TemplateBinding Label}"
                                                 Click="ChartLegend_RadToggleButton_Click">
                            <telerik:RadToggleButton.Content>
                                <Image Source="/Images/16/Test.png" Height="16" Width="16" />
                            </telerik:RadToggleButton.Content>
                        </telerik:RadToggleButton>
                        <Path x:Name="PART_LegendItemMarker"
                              Height="22"
                              Width="22"
                              Style="{TemplateBinding ItemStyle}"
                              Stretch="Fill">
                            <Path.Data>
                                <PathGeometry x:Name="PART_ItemMarkerGeometry" />
                            </Path.Data>
                        </Path>
                        <CheckBox IsChecked="True" x:Name="chk"
                                  VerticalAlignment="Center"
                                  Margin="2,0"
                                  Content="{TemplateBinding Label}"
                                  Foreground="{TemplateBinding Foreground}"
                                  Command="{Binding ToggleLegendItem,ElementName=ControlRoot}"
                                  CommandParameter="{TemplateBinding Label}" />
                    </StackPanel>


                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I also posted the same question in this thread:
http://www.telerik.com/community/forums/silverlight/chart/chart-legend-template-and-series.aspx

Thanks,
Randy

[Missing User]

Hello Randy,

Based on the supplied information, it is hard to determine what is causing this unwanted behavior. If the issue persist, you can open a formal support ticket, and send us a small working sample, incorporating your logic and showing the unwanted behavior. We will debug it locally, and advise you further.

All the best,

Polina

the Telerik team

[Randy]

Hi Polina,

This thread basically tells the story:
http://www.telerik.com/community/forums/silverlight/chart/chart-legend-template-and-series.aspx

After implementing the demo as noted, the checkboxes do not reflect the "unchecked" state (they stay checked).
As Joel notes at the bottom of the thread, it seems to be because

The example on the demo page doesn't have this issue because the data being
displayed never changes.  If you modify the example at
http://demos.telerik.com/silverlight/#Chart/SimpleFiltering to update the data,
you can see the problem by displaying some data, changing the series visibility
through the legend and then repopulating the chart with data.

  

If Randy is experiencing the same issue I was, then all of the series lines
will be displayed, but the legend will still show the state from before the
chart was repopulated.

A workaround I have at the moment is setting series definition visibility to hidden instead of collapsed.
It then all works.
Only bummer is the chart doesn't then rescale itself based on the series x & y axis values that are left visible.

It would be nice to have your demo, where the data series changes after checking or unchecking a checkbox, and using "series.Definition.Visibility = Collapsed" so that the chart will rescale to the new x & y axis'.

Thanks,
Randy

[Missing User]

Hello Randy,

We have addressed your inquiry in the other forum thread you have started on the same topic here.

Should you have future inquiries, we would ask you to keep the communication on this issue in a single thread so we can advise you properly and in a timely manner.

All the best,

Polina

the Telerik team