Unplanned
Last Updated: 16 Mar 2022 16:01 by ADMIN
Davide
Created on: 01 Mar 2022 07:34
Category: ChartView
Type: Bug Report
0
RadChartView: Legend items are clipped during printing when many legend items exist

Please use the following code snippet and click the button to print the chart: 

        public RadForm1()
        {
            InitializeComponent();

            Random rand = new Random();
            for (int i = 0; i < 50; i++)
            {
                LineSeries lineSeries = new LineSeries();
                lineSeries.LegendTitle = "Series" + i;
                lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(0,20), "Jan"));
                lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(0,20), "Apr"));
                lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(0,20), "Jul"));
                lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(0,20), "Oct"));
                this.radChartView1.Series.Add(lineSeries);
            }
            this.radChartView1.ShowLegend = true;
            this.radChartView1.ChartElement.LegendPosition = LegendPosition.Bottom;
        }

        private void radButton1_Click(object sender, EventArgs e)
        {
            this.radChartView1.PrintPreview();
        }

Expected:

Actual:

Workaround: 

https://docs.telerik.com/devtools/winforms/knowledge-base/chartview-wrap-legend-items

         internal class MyChart : RadChartView
        {
            protected override RadChartElement CreateChartElement()
            {
                return new MyChartElement();
            }
        }

        internal class MyChartElement : RadChartElement
        {
            protected override ChartLegendElement CreateChartLegendElement()
            {
                return new MyLegendElement(this);
            }

            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(RadChartElement);
                }
            }
        }

        internal class MyLegendElement : ChartLegendElement
        {
            private RadListViewElement panel;

            public MyLegendElement(RadChartElement chartElement) : base(chartElement)
            {
            }

            protected override void OnLegendInfosCollectionChanged(Telerik.WinControls.Data.NotifyCollectionChangedEventArgs e, bool providerChange)
            {
                base.OnLegendInfosCollectionChanged(e, providerChange);
                if (e.Action == Telerik.WinControls.Data.NotifyCollectionChangedAction.Add)
                {
                    LegendItem li = e.NewItems[0] as LegendItem;
                    panel.Items.Add(li.Title);
                    panel.Items.Last().Tag = li.Element;
                }
                panel.SelectedIndex = -1;
            }

            protected override void CreateChildElements()
            {
                base.CreateChildElements();
                panel = new RadListViewElement();
                panel.VisualItemFormatting += ListView_VisualItemFormatting;
                panel.ShowCheckBoxes = true;
                panel.StretchHorizontally = true;
                panel.StretchVertically = false;
                panel.ViewType = ListViewType.IconsView;
                panel.ItemSize = new System.Drawing.Size(100, 20);
                panel.ShouldHandleMouseInput = true;
                panel.NotifyParentOnMouseInput = false;
                panel.MaxSize = new System.Drawing.Size(int.MaxValue, 200);
                this.StackElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
                this.Children.Add(panel);
            }

            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(ChartLegendElement);
                }
            }

            private void ListView_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
            {
                ListViewItemCheckbox checkBox = e.VisualItem.ToggleElement as ListViewItemCheckbox;
                if (checkBox != null)
                {
                    e.VisualItem.ToggleElement.ShouldHandleMouseInput = false;
                    e.VisualItem.ToggleElement.NotifyParentOnMouseInput = false;
                    checkBox.CheckMarkPrimitive.Fill.BackColor = ((LineSeries)(e.VisualItem.Data.Tag)).BorderColor;
                    checkBox.CheckMarkPrimitive.Fill.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
                    checkBox.CheckMarkPrimitive.Border.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
                }
            }
        }

 

 

 

4 comments
ADMIN
Dess | Tech Support Engineer, Principal
Posted on: 16 Mar 2022 16:01

Hi, Alberto,

I am glad that the previously suggested solution is working well. Thank you for sharing the code snippet with the modification you made to handle the size.

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Davide
Posted on: 10 Mar 2022 11:14

Hi

 

Thanks for your solution that is working well.

 

Only an annotation about your solution:

After the button to print is clicked the form legend is resized too and stay that size after print. I changed you code to restore the original size of legend after print.

private void bPrint_Click(object sender, EventArgs e)
        {
            RadPrintDocument doc = new RadPrintDocument();
            doc.Landscape = true;
            RadListViewElement legendPanel = this.radChartView1.ChartElement.LegendElement.Children.Last() as RadListViewElement;

            Size legendSizeDesign = new(legendPanel.Size.Width, legendPanel.Size.Height);
            Size legendMaxSizeDesign = new (legendPanel.MaxSize.Width,legendPanel.MaxSize.Height);

            legendPanel.MaxSize = new Size(doc.DefaultPageSettings.Bounds.Width -
                doc.DefaultPageSettings.Margins.Left - doc.DefaultPageSettings.Margins.Right - 2,
                200);
            this.radChartView1.PrintPreview(doc);

            legendPanel.MaxSize = legendMaxSizeDesign;
            legendPanel.Size = legendSizeDesign;
            legendPanel.Invalidate();
        }

 

 

 

ADMIN
Dess | Tech Support Engineer, Principal
Posted on: 01 Mar 2022 13:39
Hello, Alberto,

Indeed, when the form is maximized, the legend items are clipped in the print preview dialog. The possible solution that I can suggest to handle this case is to limit the legend panel considering the width of the print page and its margins: 
        private void radButton1_Click(object sender, EventArgs e)
        {
            RadPrintDocument doc = new RadPrintDocument();
            doc.Landscape = true;
            RadListViewElement legendPanel = this.radChartView1.ChartElement.LegendElement.Children.Last() as RadListViewElement;
            legendPanel.MaxSize = new Size(doc.DefaultPageSettings.Bounds.Width -
                doc.DefaultPageSettings.Margins.Left - doc.DefaultPageSettings.Margins.Right - 2,
                200);
            this.radChartView1.PrintPreview(doc);
        }

Thus, when the form is maximized, the print page correctly shows all legend items:

I believe that it would fit your scenario. Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Davide
Posted on: 01 Mar 2022 10:41

Hi

 

I have tested your workaround.

Unfortunately it works only if the dialog window is small enought. If you maximize the window before to print you get the result in attachment

In attachment i pus also the sample project that replicate the problem

 

Regards

 

Alberto Rossi