SfDatagrid Paint Performance Optimization

[tradecode]

I use DockingManager to display 5 SfDatagrids; some of them in panels and some in tabs. Each grid is bound to an ObservableCollection. The dataset is not large; approximately 20 columns and 20 rows in each grid.

When switching between tabs, the paint speed is quite poor; it takes 3-5 seconds for a new view to render. I have tracked this sluggishness down to QueryImageCellStyle, which I use to display small (50 KB) PNG files in a few columns through the following statement:

e.Image = (Image.FromFile(myPNG.png))

Question 1. Do you have any ideas to improve image column rendering speed? I see huge memory usage spikes in the debugger whenever changing DockingManager tabs; far larger than the dataset. I do not understand why.

Question 2. Can you give me a clear example of how to use a conditional value converter for styling cells rather than QueryCellStyle? Is use QueryCellStyle for lots of simple things, such as changing text color if a number value exceeds a specific threshold, or changing the text displayed if the underlying record is a certain value. As best I can tell, a converter is a more efficient solution, but I can't figure out how to implement one and apply it to a grid or column.

Question 3a. I want to resize my DockingManager panel sizes according to the height of the controls they contain. For example, if a grid only has 5 rows of data, I want that panel to be sized accordingly, thereby leaving more room for other panels. I achieve this using QueryRowStyle:

                int gridHeightNeeded = (myGrid.RowCount * myGrid.RowHeight) + myGrid.HeaderRowHeight;

                dockingManager.SetControlSize(myGrid, new Size(myWidth, gridHeightNeeded));

Can you suggest a more efficient approach than QueryRowStyle? In my grids, rows are added and removed programmatically and I cannot think of an event that will work to notify me of such changes.

Question 3b. I want to position my buttons (ToggleButton) on top of certain DockingManager panels. The panels change size dynamically through the code mentioned in the previous question. How can I detect the coordinates of a given panel or control? myGrid.Location does not seem to give me the correct coordinates. Also, what is the best event to use to detect when the panels change size (so that I can reposition the buttons accordingly)?

I am using C#. Thank you very much!

[Mohanram Anbukkarasu]

Hi tradecode, 

 

Thanks for contacting Syncfusion support.  

 

Question 1. Do you have any ideas to improve image column rendering speed? I see huge memory usage spikes in the debugger whenever changing DockingManager tabs; far larger than the dataset. I do not understand why.	Your reported issue can be resolved by calling GC.Collect() method in QueryImageCellStyle event to clean up the large object heap. Please refer the below Code Snippet,    private void SfDataGrid1_QueryImageCellStyle(object sender, Syncfusion.WinForms.DataGrid.Events.QueryImageCellStyleEventArgs e)  {      if (e.Column == null)          return;      var datarowview = (e.Record as DataRowView).Row;      var data = datarowview("Country").ToString();        var path = "../../Images/" + data + ".jpg";      if (e.Column.MappingName == "Images")      {          if (System.IO.File.Exists(path))          {              e.Image = Image.FromFile(path);              e.ImageLayout = ImageLayout.Zoom;              GC.Collect();              GC.WaitForPendingFinalizers();              GC.Collect();          }      }  }  StackOverFlow Link: https://stackoverflow.com/questions/24323412/datagridview-loading-images-outofmemory-exception Microsoft Documentation Link: https://docs.microsoft.com/en-us/dotnet/standard/garbage-collection/unmanaged We hope this helps. Please let us know, if you require further assistance on this.
Question 2. Can you give me a clear example of how to use a conditional value converter for styling cells rather than QueryCellStyle? Is use QueryCellStyle for lots of simple things, such as changing text color if a number value exceeds a specific threshold, or changing the text displayed if the underlying record is a certain value. As best I can tell, a converter is a more efficient solution, but I can't figure out how to implement one and apply it to a grid or column.	We would like to let you know that it is not possible to use converter in WinForms. You can achieve your requirement only by using QueryCellStyle.
Question 3a. I want to resize my DockingManager panel sizes according to the height of the controls they contain. For example, if a grid only has 5 rows of data, I want that panel to be sized accordingly, thereby leaving more room for other panels. I achieve this using QueryRowStyle:                    int gridHeightNeeded = (myGrid.RowCount * myGrid.RowHeight) + myGrid.HeaderRowHeight;                    dockingManager.SetControlSize(myGrid, new Size(myWidth, gridHeightNeeded));    Can you suggest a more efficient approach than QueryRowStyle? In my grids, rows are added and removed programmatically and I cannot think of an event that will work to notify me of such changes.	You can make use of SfDataGrid.View.Records.CollectionChanged event to listen the addition or removal of rows.
Question 3b. I want to position my buttons (ToggleButton) on top of certain DockingManager panels. The panels change size dynamically through the code mentioned in the previous question. How can I detect the coordinates of a given panel or control? myGrid.Location does not seem to give me the correct coordinates. Also, what is the best event to use to detect when the panels change size (so that I can reposition the buttons accordingly)?	We have forwarded this to the corresponding team. We will update with details on September 15, 2021. We appreciate your patience until then.

 

Regards, 

Mohanram A. 

 

 

[tradecode]

re: Question 1. Garbage collection made a small difference I suppose, but it wasn't nearly enough. QueryImageCellStyle just has too much drag on responsiveness to be viable for me, unfortunately. So I decided to move all of my image column logic into the underlying data properties and assign the images as byte arrays, as described in the GridImageColumn official documentation. This turned out to be a far more performant approach! Responsiveness is much improved now.

re: Question 3a. Yes, SfDataGrid.View.Records.CollectionChanged worked like a charm. Thank you. I don't see that event in the SfDatagrid API documentation (https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.DataGrid.SfDataGrid.html). Am I looking in the wrong place? What other events exist that are not shown there?!

re: Question 3b. Understood. I will wait.

Thank you!!

[Mohanram Anbukkarasu]

Hi tradecode, 

Thanks for the update.

 

Regarding Question 3b. I want to position my buttons (ToggleButton) on top of certain DockingManager panels. The panels change size dynamically through the code mentioned in the previous question. How can I detect the coordinates of a given panel or control? myGrid.Location does not seem to give me the correct coordinates. Also, what is the best event to use to detect when the panels change size (so that I can reposition the buttons accordingly)?  

In Docking Manager, You can use to find the panel size with SizeChanged event to find the location and coordinates of panel. Please refer the code snippet given below,

Code Snippet :

 

panel.SizeChanged += panel_SizeChanged;

  

private void panel _SizeChanged(object sender, System.EventArgs e)
{
panel.Size = new Size((sender as Panel).Bounds.Width, (sender as Panel).Bounds.Height);
panel.Location = new System.Drawing.Point((sender as Panel).Bounds.X, (sender as Panel).Bounds.Y);
}  

  

Please let us know if you require any other assistance from us. 

Regards, 

Mohanram A.