2017 version is very slow when ticking a column header checkbox

13 posts, 0 answers
  1. Emad
    Emad avatar
    6 posts
    Member since:
    Feb 2014

    Posted 25 Oct 2017 Link to this post

    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;
            }
        }

  2. Dimitar
    Admin
    Dimitar avatar
    2525 posts

    Posted 25 Oct 2017 Link to this post

    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.
  3. Emad
    Emad avatar
    6 posts
    Member since:
    Feb 2014

    Posted 25 Oct 2017 in reply to Dimitar Link to this post

    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.

  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3016 posts

    Posted 27 Oct 2017 Link to this post

    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.
  5. Emad
    Emad avatar
    6 posts
    Member since:
    Feb 2014

    Posted 09 Nov 2017 in reply to Dimitar Link to this post

    I can confirm that this workaround is working, thanks. Waiting for the proper fix now in the new official release.
  6. Emad
    Emad avatar
    6 posts
    Member since:
    Feb 2014

    Posted 09 Nov 2017 in reply to Emad Link to this post

    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. :-(

  7. Dimitar
    Admin
    Dimitar avatar
    2525 posts

    Posted 10 Nov 2017 Link to this post

    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.
  8. Emad
    Emad avatar
    6 posts
    Member since:
    Feb 2014

    Posted 11 Nov 2017 Link to this post

    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);
          }
  9. Dimitar
    Admin
    Dimitar avatar
    2525 posts

    Posted 13 Nov 2017 Link to this post

    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.
  10. Emad
    Emad avatar
    6 posts
    Member since:
    Feb 2014

    Posted 13 Nov 2017 Link to this post

    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.

  11. Dimitar
    Admin
    Dimitar avatar
    2525 posts

    Posted 14 Nov 2017 Link to this post

    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.
  12. Alex
    Alex avatar
    4 posts
    Member since:
    Oct 2017

    Posted 16 Nov 2017 Link to this post

    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....

  13. Dimitar
    Admin
    Dimitar avatar
    2525 posts

    Posted 17 Nov 2017 Link to this post

    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.
Back to Top