scrolling the grid is very slow in wide screen the screen freezes

1 Answer 110 Views
GridView
Simon
Top achievements
Rank 1
Simon asked on 09 Oct 2024, 08:22 AM

HI

Q3 2024 462

When The table contains a large number of rows. (I checked 550 rows and 30 columns (Example) ).
When I scroll with the scroll with the arrow on the screen reduced to the width, the scrolling is reasonable and smooth.
But if I'm on a widescreen the scrolling is stuck and not smooth.
For this purpose, I reduced the screen width and clicked on the scroll down arrow. And in 550 lines it took about 18 seconds to get from top to bottom. On a wide screen it took 50 seconds to scroll from top to bottom
I did the test on a static table that only loaded simple information and presented it without events or other manipulations on the table.
In the real world it is much worse because there are also online updates on the table and formatting. And if there are many rows in the table many times the screen freezes on scrolling.

Please your urgent help.

Example:

using System;
using System.Data;
using System.Windows.Forms;
using Telerik.WinControls.UI;

namespace WindowsFormsApp2
{
    public partial class Form1 : RadForm
    {

        int colCount = 30;

        public Form1()
        {
            InitializeComponent();
            this.Width   = 650;
            this.Height = 1050;
            this.StartPosition = FormStartPosition.CenterScreen;
            radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.None;
      }

        private void radButton1_Click(object sender, EventArgs e)
        {
            AddColumnsAndRows();
        }

        private void AddColumnsAndRows()
        {
            DataTable dt = new DataTable();
            for (int i = 0; i < colCount; i++)
            {
                dt.Columns.Add("ColName_" + (i + 1), typeof(string));
            }

            for (int row = 0; row < 550; row++)
            {
                DataRow dr = dt.NewRow();
                for (int col = 0; col < colCount; col++)
                {
                    dr[col] = "DataTest_C" + (col + 1) + "_R" +  (row + 1);
                }

                dt.Rows.Add(dr);
            }

            radGridView1.DataSource = dt;
            radGridView1.BestFitColumns();
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Nadya | Tech Support Engineer
Telerik team
answered on 11 Oct 2024, 02:21 PM

Hello, Simon,

Thank you for sharing a code snippet.

I used in my test project, however following the provided information I cannot observe freezing in RadGridView. I am performing scrolling vertically and horizontally and the scrolling is smooth on my side. I attached my test project so you can also test it. Can you please refer to it and let me know how the grid is working on your side? Does it still freeze in the same project? If necessary, feel free to modify my sample in a way to demonstrate the undesired behavior that you are facing and get the project back to me. Thus, I could be able to investigate further. 

I am looking forward to your reply. 

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

Simon
Top achievements
Rank 1
commented on 13 Oct 2024, 12:49 PM

Hi Nadya.

1. I added to the code a timer that change the bonded data of table.
2. I added a hierarchical table to the code.
3. I notice that you are using win11 theme, The height of the rows in the win11 theme does not fit our needs.
4. Scrolling using the table arrow key for 550 lines in the "ControlDefault" theme , or reducing the line height in the win11 theme takes about 130 seconds on a full screen. This indicates the problem.
5. We have a screen loaded with other tables on the same UI. and scrolling go not smooth at all and some time  freezes the screen. .

Code: (Changes made only in RadForm1 )

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Windows.Forms;
using Telerik.WinControls.UI;

namespace TelerikWinFormsApp2
{
    public partial class RadForm1 : Telerik.WinControls.UI.RadForm
    {
        int parentColsCount = 30;
        int rowsCount       = 550;
        int rowInterval     = 30;
        int ticInterval     = 500;
        int childColsCount  = 10;
       
        protected GridViewTemplate childTemplate;
        DataTable dtParent = new DataTable();
        DataTable dtChild  = new DataTable();
        int parentInterval = 0;
        int childInterval  = 0;


        public RadForm1()
        {
            InitializeComponent();

            this.Width = 650;
            this.Height = 1050;
            this.StartPosition = FormStartPosition.CenterScreen;
            radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.None;
            radGridView1.AllowAddNewRow = false;

            this.childTemplate = new Telerik.WinControls.UI.GridViewTemplate
            {
                AllowAddNewRow = false,
                AllowDeleteRow = false,
                EnableGrouping = false,
                AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill
            };

            radGridView1.CellFormatting += RadGridView1_CellFormatting;
            
            //Use this theme name - "ControlDefault" (More rows in page)
            //But even when using the WIN11 theme there is a difference of almost three times between a wide screen and a narrow screen
            radGridView1.ThemeName = "ControlDefault";

            //radGridView1.TableElement.RowHeight = 50;
        }

        private void radButton1_Click(object sender, EventArgs e)
        {
            AddParentColumnsAndRows();
            AddChildColumnsAndRows();

            StartParentTimer();
            StartChildTimer();
        }

        private void AddParentColumnsAndRows()
        {
            for (int i = 0; i < parentColsCount; i++)
                dtParent.Columns.Add("ColName_" + (i + 1), typeof(string));

            for (int row = 0; row < rowsCount; row++)
            {
                DataRow dr = dtParent.NewRow();
                for (int col = 0; col < parentColsCount; col++)
                    dr[col] = "DataTest_C" + (col + 1) + "_R" + (row + 1);

                dtParent.Rows.Add(dr);
            }

            radGridView1.DataSource = dtParent;
            radGridView1.BestFitColumns();
        }

        private void AddChildColumnsAndRows()
        {
            for (int i = 0; i < childColsCount; i++)
                dtChild.Columns.Add("ColName_" + (i + 1), typeof(string));

            for (int row = 0; row < rowsCount; row++)
            {
                DataRow dr = dtChild.NewRow();
                for (int col = 0; col < childColsCount; col++)
                    dr[col] = "DataTest_C" + (col + 1) + "_R" + (row + 1);

                dtChild.Rows.Add(dr);
            }

            childTemplate.DataSource = dtChild;

            radGridView1.MasterTemplate.Templates.Add(childTemplate);

            GridViewRelation relation = new GridViewRelation(radGridView1.MasterTemplate, childTemplate);
            relation.ParentColumnNames.Add("ColName_3");
            relation.ChildColumnNames.Add( "ColName_3");

            radGridView1.Relations.Add(relation);
        }

        private void StartParentTimer()
        {
            System.Windows.Forms.Timer t = new System.Windows.Forms.Timer();
            t.Interval  = ticInterval;
            t.Tick      += new EventHandler(t_parentTick);
            t.Enabled   = true;
        }
        void t_parentTick(object sender, EventArgs e)
        {
            for (int row = 0; row < rowsCount; row++)
            {
                if (row % rowInterval == 0)
                {
                    DataRow dr = dtParent.Rows[row];
                    parentInterval++;
                    dr[0] = "Event_" + (parentInterval);
                }
            }
        }

        private void StartChildTimer()
        {
            System.Windows.Forms.Timer t = new System.Windows.Forms.Timer();
            t.Interval  = ticInterval;
            t.Tick      += new EventHandler(t_childTick);
            t.Enabled   = true;
        }
        void t_childTick(object sender, EventArgs e)
        {
            for (int row = 0; row < rowsCount; row++)
            {
                if (row % rowInterval == 0)
                {
                    DataRow dr = dtChild.Rows[row];
                    childInterval++;
                    dr[0] = "Event_" + (childInterval);
                }
            }
        }

        private void RadGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            
            if (e.RowIndex % rowInterval == 0)
                e.CellElement.ForeColor = Color.Red;
            else
                e.CellElement.ResetValue(LightVisualElement.ForeColorProperty);
        }
    }
}

 

 

Nadya | Tech Support Engineer
Telerik team
commented on 14 Oct 2024, 02:45 PM

Hello, Simon,

I used the updated code snippet in my sample project. However, I am still unable to replicate the performance problem when scrolling the grid with the arrow key press. I would like to inform you that a very little delay is possible until the data is fetched, and grid gets updated, but this doesn't lead to freezing on my side. I attached my project once again updated with the latest changes. You can see the result recorded in the attached gif file. Can you run it and let me know do you observe freezing in the same project? Can you check if you have any other ongoing operations that might additionally slow down the process on your side. 

I understand that you use a timer for demonstrating purposes, however when working with very large data it is normal to observe some delay in RadGridView. What I can suggest at this moment is to take a look at the following KB article and give a try to the suggestions there: How to Improve Scrolling Performance with Down Arrow Key in RadGridView - Telerik UI for WinForms

I would like to also inform you, that we offer RadVirtualGrid which is a grid component developed on top of Telerik Presentation Framework which provides a convenient way to implement your own data management operations and optimizes the performance when interacting with large amounts of data. I suppose that it might be suitable for your case, if you find the scrolling in RadGridView unsatisfactory enough for you. 

I hope this information is useful. Please let me know if I can assist you further. 

Simon
Top achievements
Rank 1
commented on 28 Oct 2024, 08:16 AM

hi

for the purpose of the test
1. Make the size of the FORM be at the maximum height and the width will display 6 columns. Put the marker of the table at the top, tap on the scroll arrow and at the same time activate a stopwatch to measure and check how long it takes to reach the bottom. (it took me 38 seconds)
2. Make it full screen (the width will display 19 columns). Put the marker of the table at the top, tap on the scroll arrow and at the same time activate a stopwatch and measure how long it took to reach the bottom. (It took me 120 seconds).

These are the results i have got this is not feelings and the screen does not freeze here because there is only one table in the sample here but  in my project in the real world there are several tables and other controls on the same UI.
Please help me. It is impossible for us to work with a virtual table in the project.

Nadya | Tech Support Engineer
Telerik team
commented on 31 Oct 2024, 07:15 AM

Hello, Simon,

I have followed the instructions but was not able to observe freezing on the grid. Indeed, my example projects more that 6 columns and the form is maximized so that it occupies the whole screen. I understand that this problem is important to you. However, I will need to replicate the same problem on my side in order to assist you further. Is it possible to modify my last provided project and demonstrate there the problem that you are facing. 

Keep in mind that setting DataSource will trigger a bunch of required events. In this particular case, you can set the DataSource property of the control, initially. The DataTable will be empty. Then when you click on the button, populate the DataTable. The RadGridView will catch the updates and show the data rows. Keep in mind that each new row will trigger the UI to update. In a scenario where you update (add) a large number of rows, it is recommended to suspend that UI update until the update operation is finished. This can be done by wrapping your code between the BeginUpdate() and EndUpdate() methods. 

Also, did you give a try to the RadVirtualGrid control that I suggested earlier. It could be more suitable for you in such cases when you load big data in grid. It uses CellValueNeeded event which allows loading data on demand, when it is requested in grid: Populating with Data - WinForms VirtualGrid Control - Telerik UI for WinForms

Can you please give these suggestions a try and let me know how they have positive impact on your side. In case you are still having further difficulties, it would be great if you can isolate the case in a sample project and provide it to me to investigate further. 

I am looking forward to your reply.

Simon
Top achievements
Rank 1
commented on 31 Oct 2024, 01:26 PM

hi

1. I already wrote to you in the previous conversation that the virtual grid is not suitable for us.

2. Please - In the example just measure how long it takes to scroll a screen that displays 6 columns (it took me 38 seconds) and how long it takes to scroll a screen that displays 19 columns.(it took me 120 seconds) 

3. Leave the freezing because in this example it doesn't freeze for me either, but the excessively slow scrolling in case 2 indicates the problem. 

Nadya | Tech Support Engineer
Telerik team
commented on 05 Nov 2024, 12:46 PM

Hello, Simon,

I tested the example with your updates on it and also measure the scrolling with a timer. I noticed that you star the timer on the button click event which in this sample project also includes loading time. I suppose that you click on the button, then the data loads, then scrolling begins. These operations take time. I am sorry that this is not satisfactory to you. 

Is it possible to clarify how exactly you are performing scrolling - is it by pressing the up/down arrow keys or by moving the scroll thumb? I have tested both approaches and confirm that when using the arrow keys scrolling is slower, but when using the mouse thumb it is much better. There is also EnableFastScrolling property. When set to true, it will enable fast scrolling in the grid. In such case, the UI will update only once when the thumb is released and it will significantly reduce the scrolling time. 

Can you give this suggestion a try and let me know if this is a possible solution for you? 

Simon
Top achievements
Rank 1
commented on 07 Nov 2024, 06:36 AM

Hi Nadya.

"Is it possible to clarify how exactly you are performing scrolling - is it by pressing the up/down arrow keys" - YES.

"I have tested both approaches and confirm that when using the arrow keys scrolling is slower" - (IT IS NOT SLOWER IT IS VERY VERY SLOW) BUT LOOK, THIS IS JUST AN INDICATOR  THAT SHOWS THE PROBLEM. I CAN NOT SEND YOU MY CODE IN MY REAL WORLD BUT IN MY REAL WORLD IF THE GRID IS IN WIDE SCREEN WITH LOT ROWS AND THE USER SCROLLS (EVEN WITH THE THUMB) THE ALL SCREEN FREEZING.

PLEAS YOUR HELP.

"There is also EnableFastScrolling property" - I SET IT TO TRUE, DOESN'T  HELP.

 

Nadya | Tech Support Engineer
Telerik team
commented on 11 Nov 2024, 02:46 PM

Hello, Simon,

I understand that the grid is slow in your real project on widescreen with a lot of rows and cells. However, there isn't much that can be done at this moment. I have already given all the possible suggestions that might help. Obviously, they didn't help much. 

What I can suggest in advance is to remove the CellFormatting event, if possible. There are many cells that need to be painted in such case, and formatting will additionally slow down scrolling.

I would like to inform you that we already have an item logged regarding improving performance when many cells are visible in grid. You can find the item and read the comments below: FIX. RadGridView - performance should be improved when many cells are visibile (e.g. 50 rows and 30 columns)

Please let me know if there is anything else I can help with.


Tags
GridView
Asked by
Simon
Top achievements
Rank 1
Answers by
Nadya | Tech Support Engineer
Telerik team
Share this question
or