Custom chart cell in a radgridview had disappearing data when scrolled

6 Answers 100 Views
ChartView GridView
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Om Pushkara deep asked on 17 Jun 2021, 02:47 PM | edited on 18 Jun 2021, 12:22 PM

hi,

I am currently having a radgridview with 3 columns in which the 3rd column is a chart type custom column. i have set a minimum width to it which leads to scroll bar on smaller displays. Now , if i scroll across a few times the data in the chart disappears. 

Is there any event where i can write code to prevent from happening ? Code below updated


public RadForm1()
        {
            InitializeComponent();

            this.radGridView1.Columns.Add("Column1");
            this.radGridView1.Columns.Add("Column2");
            ChartColumn customColumn = new ChartColumn("Chart column");
            this.radGridView1.Columns.Add(customColumn);
            this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;

            for (int i = 0; i < 10; i++)
            {
                this.radGridView1.Rows.Add(i, i, i);
            }
            this.radGridView1.TableElement.RowHeight = 200;
            this.radGridView1.AllowAddNewRow = false;
        }

        public class ChartCell : GridDataCellElement
        { 
            public ChartCell(GridViewColumn column, GridRowElement row) : base(column, row)
            {
            }

            RadChartElement chart = new RadChartElement();
 
            protected override void CreateChildElements()
            {
                base.CreateChildElements();
                LoadBarChart();
                this.Children.Add(chart);
            }

            private void LoadBarChart()
            {
                chart.View.AreaType = ChartAreaType.Cartesian; 
                chart.AngleTransform = 90;
                RangeBarSeries rangeBarSeries = new RangeBarSeries("End Time", "Start Time", "Summarization Date");

                rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "6/8/2021"));
                rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "6/8/2021"));
                rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "6/8/2021"));

                rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 30, DateTime.Now.TimeOfDay.TotalMinutes + 10, "6/7/2021"));
                rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "6/7/2021"));

                CategoricalAxis horizontalAxis = new CategoricalAxis();

                //horizontalAxis.Title = "Summarization Days";
                horizontalAxis.ClipLabels = false;
                horizontalAxis.LabelRotationAngle = -90;
                horizontalAxis.LabelFitMode = AxisLabelFitMode.Rotate;

                horizontalAxis.PlotMode = AxisPlotMode.BetweenTicks;
                rangeBarSeries.HorizontalAxis = horizontalAxis;

                chart.View.Series.Add(rangeBarSeries);

                rangeBarSeries.VerticalAxis.LabelFormatProvider = new MyFormatProvider();
                //rangeBarSeries.VerticalAxis.Title = "Time of the day";
                rangeBarSeries.VerticalAxis.ClipLabels = false;
                rangeBarSeries.VerticalAxis.LabelRotationAngle = -45;
                rangeBarSeries.VerticalAxis.LabelFitMode = AxisLabelFitMode.Rotate;

                LinearAxis verticalAxis = chart.View.Axes.Get<LinearAxis>(1);
                verticalAxis.Minimum = 0; //Minutes 0:00
                verticalAxis.Maximum = 1380; //Minutes 23:00
                verticalAxis.MajorStep = 60; //60 minutes in an hour

                CartesianArea area = chart.View.GetArea<CartesianArea>();
                area.ShowGrid = true;

                CartesianGrid grid = area.GetGrid<CartesianGrid>();
                grid.DrawVerticalStripes = true;
                grid.DrawHorizontalStripes = false;
            }

            protected override void SetContentCore(object value)
            {
                base.SetContentCore(value);
                //you can synchronize the chart data points according to the cell value if necessary 
            }
            
            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(GridDataCellElement);
                }
            }

            public override bool IsCompatible(GridViewColumn data, object context)
            {
                return data is ChartColumn && context is GridDataRowElement;
            }
        }

        public class ChartColumn : GridViewDataColumn
        {
            public ChartColumn(string fieldName) : base(fieldName)
            {
            }

            public override Type GetCellType(GridViewRowInfo row)
            {
                if (row is GridViewDataRowInfo)
                {
                    return typeof(ChartCell);
                }
                return base.GetCellType(row);
            }
        }

        public class MyFormatProvider : IFormatProvider, ICustomFormatter
        {
            public object GetFormat(Type formatType)
            {
                return this;
            }

            public string Format(string format, object arg, IFormatProvider formatProvider)
            {
                int totalminutes = Convert.ToInt32(arg);

                TimeSpan timeSpan = TimeSpan.FromMinutes(totalminutes);

                return timeSpan.ToString(@"hh\:mm");
            }
        }


6 Answers, 1 is accepted

Sort by
1
Nadya | Tech Support Engineer
Telerik team
answered on 18 Jun 2021, 01:19 PM

Hello,

I used the provided code snippet in a sample project. However, I was not able to observe missing data in the charts. Also, you mentioned that you have set the minimum width to the custom column, but I can't see in the provided code snippet where you set it. Can you please make sure this is the exact code snippet to reproduce the problem?

For your reference, I am providing my sample project with the custom column. The result is demonstrated in the gif file. It would be greatly appreciated if you can let me know how you reproduce the missing data.

In addition, if you want to display a chart in the grid, I would like to note that RadGridView offers GridViewSparklineColumn out of the box. You can read more information about it here: https://docs.telerik.com/devtools/winforms/controls/gridview/columns/column-types/gridviewsparklinecolumn 

Looking forward to your reply.

Regards,
Nadya
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/.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 18 Jun 2021, 01:22 PM | edited

Hi ,

Yeah the line is customcolumn.MinWidth =4000;

Now you will get a scroll bar if your monitor size is small. If not increase this size . Now you keep scrolling back and forth you will see the data in the custom column getting disappeared in either of the rows and you won't get back until you repeat the scroll action in any nth iteration.
1
Nadya | Tech Support Engineer
Telerik team
answered on 22 Jun 2021, 04:34 PM

Hello, 

If I understand you correctly, you have missing data points sometimes when scrolling horizontally your grid. 

In the context of using a custom cell, overriding the IsCompatible method will ensure that the custom cell will be used only in this particular column and it won't be reused in other columns. However, the cell elements belonging to the rest of the columns, by default, are applicable to your column ('ChartColumn ') as well. This requires creating a default GridDataCellElement which IsCompatible with all the columns but your custom one ImageToujoursVisibleGD. This approach is described in the following KB: https://docs.telerik.com/devtools/winforms/knowledge-base/custom-gridview-cells-with-input-elements 

I would recommend you to create a default cell as described in the referred article and use this cell for all other columns instead of the custom one.

I hope this helps. If you need further assistance please let me know.

Regards,
Nadya
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.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 22 Jun 2021, 04:46 PM | edited

ImageToujoursVisibleGD means ? Were you intending to tell something else.
1
Nadya | Tech Support Engineer
Telerik team
answered on 22 Jun 2021, 04:55 PM | edited on 22 Jun 2021, 04:56 PM

Hello,

Please, excuse me for the wrong column name ('ImageToujoursVisibleGD'). You should create another custom cell (a default one) that inherits from the GridDataCellElement and override its IsCompatible method. In this method it is necessary to specify that the default cell is compatible for all other columns but not with your custom column 'ChartColumn':

public class DefaultGridDataCellElement : GridDataCellElement
{
    public DefaultGridDataCellElement(GridViewColumn column, GridRowElement row)
        : base(column, row)
            {
            }

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

    public override bool IsCompatible(GridViewColumn data, object context)
            {
                //use this cell for all columns but ChartColumn
                if (data.Name != "ChartColumn")
                {
                    return true;
                }
                return false;
            }
}

This approach is described in the referred KB article.

I hope this helps. Let me know if you have other questions.

Regards,
Nadya
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/.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 24 Jun 2021, 06:35 AM | edited

Thanks for replying back . No luck yet . The datasource here i am using a datatable of 3 columns and the 3rd column (date) will be used as a filter in SetContentCore of the customchartcolumn for loading a bar chart for that date in the corresponding row .And also the first 2 columns i create at design time where i mention header text, binding column name and so on , But the 3rd column i create dynamically . Should i implement it differently. I did try the above approach but no luck yet , Am i missing something ?
1
Nadya | Tech Support Engineer
Telerik team
answered on 28 Jun 2021, 10:59 AM

Hello, 

In RadGridView you can add columns at design time and at run time as well. It is not a problem how exactly you add the column if they are of the desired type that you want. However, I am still not able to observe the problem that you described. Maybe there is something specific in your setup.

Feel free to submit a support ticket from your Telerik account where you can provide a project demonstrating the issue that you are facing. Thus, we could be able to investigate the case precisely and assist you further. Without replicating the problem it would be difficult to guess what is happening on your side.

Please let me know if I can assist you further. 

Regards,
Nadya
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.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 28 Jun 2021, 11:03 AM

I actually was able to solve the problem when i reverted the dynamically rendering vertical axis visibility (first row visible and all other rows invisible ) keeping as true always .
But now the problem is how can i actually achieve the above behavior(make 1st row custom column to have vertical axis visible true and other rows' custom column as false) ?
0
Nadya | Tech Support Engineer
Telerik team
answered on 18 Jun 2021, 02:01 PM

Hello,

When you set the MinWidth property this means that the minimum width for the custom column is 4000. If there isn't enough space on the form to display the whole width, a horizontal scrollbar would appear as well in order to allow scrolling horizontally and be able to see the whole content. See the result on my end in the gif file.

I hope this helps. Please let me know if I can assist you further.

Regards,
Nadya
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/.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 18 Jun 2021, 06:04 PM

Yeah I get that part. But the problem when you keep scrolling from left to right and right to left the chart data points disappear sometimes. Do I need to do anything to prevent this behaviour ?
0
Nadya | Tech Support Engineer
Telerik team
answered on 29 Jun 2021, 01:25 PM

Hello,

Your question has already been answered in the other thread where you have asked the same question. Please, see our answer there for more information.

We kindly ask you to use just one thread for a specific problem to contact us. Posting the same questions in different threads slows down our response time because we will need to review and address two or more tickets instead of one. Moreover, discussing one problem per one thread makes it easier to track the chronology of the problem when further questions occur.

Thank you for your understanding. 

Regards,
Nadya
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.

Tags
ChartView GridView
Asked by
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Nadya | Tech Support Engineer
Telerik team
Share this question
or