This is a migrated thread and some comments may be shown as answers.

2017 version is very slow when ticking a column header checkbox

12 Answers 214 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Emad
Top achievements
Rank 1
Emad asked on 25 Oct 2017, 09:18 AM

We’re having a serious performance issues with RadGridView in Telerik v.2017.1.221.40 for Winforms. It is very easy to reproduce.
The code below opens up a Form with the only control, RadGridView and then adds 5,000 rows to it. The control has a single column containing Boolean values. Since the EnableHeaderCheckBox property of the column is set to true, it is possible to manually tick the check box in the column header.
With v.2017.1.221.40, after the checkbox ticked, it takes 10 seconds to the program to actually tick the boxes in all 5,000 rows and then 7 seconds to untick them. During this time the control (and the form too of course) remains unresponsive.

In another code example, which is virtually identical to the one below (it’s part of a large application), it takes more than 30 seconds to perform the operation.

However with v.2015.1.331.40, this operation is executed instantaneously.

Environment: i7-4770 CPU @ 3.40Gz, 24GB RAM, Windows 10 Pro, .Net 4.6.

 

    public partial class Form1 : Form
    {
        private Telerik.WinControls.UI.RadGridView rgvSites;
        private readonly BindingList<Site1> siteList = new BindingList<Site1>();

        public Form1()
        {
            InitializeComponent();

            for (int i = 1; i <= 5000; i++)
            {
                this.siteList.Add(new Site1() { Id = i, Number = i, Name = "site" + i });
            }
            this.rgvSites.DataSource = this.siteList;
        }
        private void InitializeComponent()
        {
            Telerik.WinControls.UI.GridViewCheckBoxColumn gridViewCheckBoxColumn1 = new Telerik.WinControls.UI.GridViewCheckBoxColumn();
            Telerik.WinControls.UI.TableViewDefinition tableViewDefinition1 = new Telerik.WinControls.UI.TableViewDefinition();
            this.rgvSites = new Telerik.WinControls.UI.RadGridView();
            ((System.ComponentModel.ISupportInitialize)(this.rgvSites)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.rgvSites.MasterTemplate)).BeginInit();
            this.SuspendLayout();
            // 
            // rgvSites
            // 
            this.rgvSites.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
            | System.Windows.Forms.AnchorStyles.Left)
            | System.Windows.Forms.AnchorStyles.Right)));
            this.rgvSites.CausesValidation = false;
            this.rgvSites.EnableAnalytics = false;
            this.rgvSites.EnableGestures = false;
            this.rgvSites.EnableHotTracking = false;
            this.rgvSites.EnableTheming = false;
            this.rgvSites.Location = new System.Drawing.Point(31, 31);
            // 
            // 
            // 
            this.rgvSites.MasterTemplate.AllowAddNewRow = false;
            this.rgvSites.MasterTemplate.AllowCellContextMenu = false;
            this.rgvSites.MasterTemplate.AllowColumnChooser = false;
            this.rgvSites.MasterTemplate.AllowColumnHeaderContextMenu = false;
            this.rgvSites.MasterTemplate.AllowColumnReorder = false;
            this.rgvSites.MasterTemplate.AllowColumnResize = false;
            this.rgvSites.MasterTemplate.AllowDeleteRow = false;
            this.rgvSites.MasterTemplate.AllowDragToGroup = false;
            this.rgvSites.MasterTemplate.AllowRowResize = false;
            this.rgvSites.MasterTemplate.AutoGenerateColumns = false;
            gridViewCheckBoxColumn1.AllowFiltering = false;
            gridViewCheckBoxColumn1.AllowGroup = false;
            gridViewCheckBoxColumn1.AllowHide = false;
            gridViewCheckBoxColumn1.AllowReorder = false;
            gridViewCheckBoxColumn1.AllowResize = false;
            gridViewCheckBoxColumn1.AllowSort = false;
            gridViewCheckBoxColumn1.EnableHeaderCheckBox = true;
            gridViewCheckBoxColumn1.FieldName = "Selected";
            gridViewCheckBoxColumn1.HeaderText = "Selected";
            gridViewCheckBoxColumn1.Name = "Selected";
            gridViewCheckBoxColumn1.VisibleInColumnChooser = false;
            gridViewCheckBoxColumn1.Width = 23;
            this.rgvSites.MasterTemplate.Columns.AddRange(new Telerik.WinControls.UI.GridViewDataColumn[] {
            gridViewCheckBoxColumn1});
            this.rgvSites.MasterTemplate.EnableGrouping = false;
            this.rgvSites.MasterTemplate.EnableSorting = false;
            this.rgvSites.MasterTemplate.ShowRowHeaderColumn = false;
            this.rgvSites.MasterTemplate.VerticalScrollState = Telerik.WinControls.UI.ScrollState.AlwaysShow;
            this.rgvSites.MasterTemplate.ViewDefinition = tableViewDefinition1;
            this.rgvSites.Name = "rgvSites";
            this.rgvSites.ShowCellErrors = false;
            this.rgvSites.ShowItemToolTips = false;
            this.rgvSites.ShowRowErrors = false;
            this.rgvSites.Size = new System.Drawing.Size(240, 218);
            this.rgvSites.TabIndex = 0;
            this.rgvSites.Text = "Sites";
            // 
            // Form1
            // 
            this.ClientSize = new System.Drawing.Size(284, 261);
            this.Controls.Add(this.rgvSites);
            this.Name = "Form1";
            this.Text = "Form1";
            ((System.ComponentModel.ISupportInitialize)(this.rgvSites.MasterTemplate)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.rgvSites)).EndInit();
            this.ResumeLayout(false);
        }
    }
    class Site1
    {
        public long Id { get; set; }

        /// <summary>
        /// Site number.
        /// </summary>
        public long Number { get; set; }

        /// <summary>
        /// Site name.
        /// </summary>
        public string Name { get; set; }

        public bool Selected
        {
            get;
            set;
        }
    }

12 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 25 Oct 2017, 11:02 AM
Hi Johnson,

I was able to reproduce the issue and I have logged it in our Feedback Portal. You can track its progress, subscribe for status changes and add your comment to it here. I have also updated your Telerik Points.

To workaround this you need to create a custom header cell:
class MyGridCheckBoxHeaderCellElement : GridCheckBoxHeaderCellElement
{
    public MyGridCheckBoxHeaderCellElement(GridRowElement row, GridViewColumn col) : base(col, row)
    {
    }
    bool suspenUpdate = false;
    protected override void checkbox_ToggleStateChanged(object sender, StateChangedEventArgs args)
    {
        suspenUpdate = true;
        base.checkbox_ToggleStateChanged(sender, args);
        suspenUpdate = false;
    }
    protected override void SetCheckBoxState()
    {
        if (!suspenUpdate)
        {
            base.SetCheckBoxState();
        }
         
    }
}

You can change the default cell in the CreateCell event handler:
private void RadGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
{
    if (e.Column != null&& e.CellType == typeof(GridCheckBoxHeaderCellElement))
    {
        e.CellElement = new MyGridCheckBoxHeaderCellElement(e.Row, e.Column);
    }
}

Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Emad
Top achievements
Rank 1
answered on 25 Oct 2017, 05:03 PM

Thanks for the reply Dimitar.

 

This does not work with v.2017.1.221.40, as checkbox_ToggleStateChanged is declared private in GridCheckBoxHeaderCellElement class, so it's not possible to override it.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 Oct 2017, 08:49 AM
Hello, Emad,    

Thank you for writing back. 

Feel free to upgrade in order to benefit from the workaround. The issue has already been addressed. The fix will be introduced in the next official release.

I hope this information helps. If you have any additional questions, please let me know. 

 Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Emad
Top achievements
Rank 1
answered on 09 Nov 2017, 11:41 PM
I can confirm that this workaround is working, thanks. Waiting for the proper fix now in the new official release.
0
Emad
Top achievements
Rank 1
answered on 10 Nov 2017, 02:04 AM

Unfortunately, the workaround is NOT working fully. If in the above example,

this.siteList.Add(new Site1() { Id = i, Number = i, Name = "site" + i });

add assigning true to Site1.Selected property (which corresponds to all check boxes initially ticked),

this.siteList.Add(new Site1() { Id = i, Number = i, Name = "site" + i, Selected = true });

initial opening of the grid still takes quite long. :-(

0
Dimitar
Telerik team
answered on 10 Nov 2017, 09:22 AM
Hello Emad,

In this case, the rows will be updated every time when a new row is added. To avoid this you can enable the header checkbox after the data source is assigned:
this.rgvSites.DataSource = this.siteList;
 
var column = rgvSites.Columns[0] as GridViewCheckBoxColumn;
column.EnableHeaderCheckBox = true;

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Emad
Top achievements
Rank 1
answered on 12 Nov 2017, 03:12 AM

Still not working.

In the code below, no matter whether the first line in bold sets EnableHeaderCheckBox to true or false, the window actually shows in about 18 seconds (the Load event hanlder is hit only 18 seconds after the Form1 constructor completes.

 

public Form1()
      {
          InitializeComponent();
 
          rgvSites.CreateCell += RgvSites_CreateCell;
          Load += Form1_Load;
 
          var column = rgvSites.Columns[0] as GridViewCheckBoxColumn;
          column.EnableHeaderCheckBox = false;
 
          sw.Restart();
          for (int i = 1; i <= 5000; i++)
          {
              this.siteList.Add(new Site1() { Id = i, Number = i, Name = "site" + i, Selected = true });
          }
          this.rgvSites.DataSource = this.siteList;
          sw.Stop();
          Debug.Print("ms1={0}", sw.ElapsedMilliseconds);
 
          sw.Restart();
          gridViewCheckBoxColumn1.EnableHeaderCheckBox = true;
      }
 
      private void Form1_Load(object sender, System.EventArgs e)
      {
          sw.Stop();
          Debug.Print("ms2={0}", sw.ElapsedMilliseconds);
      }
0
Dimitar
Telerik team
answered on 13 Nov 2017, 09:52 AM
Hi Emad,

Enable the checkbox in the Load event handler and this should work fine.

Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Emad
Top achievements
Rank 1
answered on 14 Nov 2017, 05:24 AM

Hi Dimitar,

This has worked in the above example straight away. However in the real application I had to place setting true to EnableHeaderCheckBox into the Shown event handler of the form, since placing it in the Load event handler still did not improve the things.

Thank you.

0
Dimitar
Telerik team
answered on 14 Nov 2017, 11:07 AM
Hello Emad,

I am glad that this is working now. Do not hesitate to contact us if you have other questions.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alex
Top achievements
Rank 1
answered on 17 Nov 2017, 04:48 AM

The grid we have problems with is a part of a rather complex dialog. Its content is updated in a variety of scenarios and I've found that I have to add some tweaks to each of them in order for the grid to work fast.I ended up with enclosing the above loop as follows:

 

((GridViewCheckBoxColumn)rgvSites.Columns["Selected"]).EnableHeaderCheckBox = false;
 
for (int i = 1; i <= 5000; i++)
{
      this.siteList.Add(new Site1() { Id = i, Number = i, Name = "site" + i, Selected = true });
}
 
Application.DoEvents();
((GridViewCheckBoxColumn)rgvSites.Columns["Selected"]).EnableHeaderCheckBox = true;

 

Hopefully you will tidy this all up in the next release....

0
Dimitar
Telerik team
answered on 17 Nov 2017, 01:15 PM
Hello Alex,

In addition, you should enclose such change within Begin/End update block. This will postpone the grid updates until the EndUpdate is reached:
radGridView1.BeginUpdate();
// update all rows cells.
radGridView1.EndUpdate();

Do not hesitate to contact us if you have other questions.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
GridView
Asked by
Emad
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Emad
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Alex
Top achievements
Rank 1
Share this question
or