Slow, jittery scrolling

Question

Hi, I am having an issue with the grid on iOS.

I am finding that the scrolling of the grid is very slow and jittery, is there any way to improve this?

It is almost unusable the way it is.

I have about 100 columns, however only about 12-14 columns are actually showing and the rest are set to visible = false

I add the columns manually with Columns.Add()

On the numeric columns I use a DisplayBindingConverter

Sethupathy Devarajan · Answer

Hi Chris,It is clear that you are finding the scrolling of the grid is very slow. We would like to know the DataGrid Settings in your sample. You had mentioned out of 100 column only 12 columns are visible. We would like to know the columns you had used in your sample. This will greatly assist us in investigating the issue further and providing an appropriate solution as quickly as possible.
Regarding performance we had worked on implementing LoadUIView for macOS and iOS platforms, which will be incorporated into the Volume 3 release expected in September 17, 2024.  We had shared the UG link for your reference.Ug link : LoadUIView Kindly check this with your sample at your end and get back to us if it met your required performance.
regards,
Sethupathy D.

Phunction · Answer

The columns visible are 2 numeric columns for float values and 10 combobox columns.

I am not sure what settings you are refering to? The data is handled via a data/view model.

Here are what I think you mean:

AutoGenerateColumnsMode="None" ColumnWidthMode="None" HorizontalOptions="FillAndExpand" FrozenColumnCount="1" GridLinesVisibility="Both" AllowEditing="True" EditTapAction="OnTap" HeaderGridLinesVisibility="Both" SelectionMode="Single"

and

<syncfusion:SfDataGrid.DefaultStyle>

<syncfusion:DataGridStyle HeaderRowBackground="#DDDDDD" HeaderRowTextColor="Black" GridLineColor="#333333" HeaderRowFontAttributes="Bold" CurrentCellBorderColor="Transparent"/>

</syncfusion:SfDataGrid.DefaultStyle>

Sethupathy Devarajan · Answer

Hi Phunction, 
 From the DataGrid
properties you provided, it is clear that you are using FrozenColumnCount in
your sample. The slower scrolling performance is due to the clipping of
elements, which leads to a degradation in scrolling performance. We have
already identified this as a framework issue and have shared the reported issue
for your reference.
 Framework Issue link: https://github.com/dotnet/maui/issues/19135
 We will await a
response from the framework team and take appropriate action based on their
update. We appreciate your patience and understanding in the meantime. Please
feel free to reach out if you need any further assistance—we're always happy to
help. Regards,  Sethupathy D.

Phunction · Answer

There is no way of knowing when/if this wil get fixed.

Is it possible to have 2 side by side grids, the first one is on one column and will represent the frozen column, then I would need to sync the vertical scrolling of the 2nd larger grid, so when the user scrolls up or down on the main grid, the "frozen" grid will scroll the exact same amount vertically, to give the illusion of being part of the main grid.

Sethupathy Devarajan · Answer

Hi Phunction, Based on the
information you’ve provided, it’s clear that you would like to have two grids
side by side, with one representing the frozen column, and you need to sync the
vertical scrolling between the two grids. This way, when the user scrolls up or
down on the main grid, the "frozen" grid will scroll the same amount,
creating the illusion of a unified grid. We have addressed
your query and implemented this functionality in the attached sample for your
reference. Regards,
Sethupathy D.Attachment: SfDataGridSample_7e0ddd2e.zip

Phunction · Answer

Thanks, is it possible to prevent the grid from automatically jumping back to column one when finished scrollling?

So, if you scroll the main grid to the right so the first few columns are not visible, as soon as you scroll vertically, the grid jumps back to the first column.

Sethupathy Devarajan · Answer

Hi Phunction, We have checked the
described behavior on the iOS platform and did not experience the grid jumping
back to the first column. We have shared a demo video for your reference. Could
you provide a video demonstration of the behavior? That would help us identify
the cause more precisely and offer a tailored solution! Regards,Sethupathy D.Attachment: IOS_Demo_144992ed.zip

Phunction · Answer

HI, it happens when you add this to sync the small 'fake' frozen column scrolling:

sfGrid.GetVisualContainer().ScrollOwner.Scrolled += ScrollOwner_Scrolled1;

private async void ScrollOwner_Scrolled1(object? sender, ScrolledEventArgs e)

{

await sfGrid1.GetVisualContainer().ScrollOwner!.ScrollToAsync(0, e.ScrollY, false);

}

I either need to be able to sync the frozen column scrolling in case the user scrolls that instead of the main grid, or disable the ability to manually scroll that grid.

Sethupathy Devarajan · Answer

Hi Phunction,When trying to sync the frozen column's vertical scrolling
with the main grid, the main grid jumps back to the first column. This happens
because the X-axis is set to 0 for the frozen column grid. If you replace 0
with scrollView.ScrollX, you can resolve this issue. We have shared code
snippet and modified sample for your reference.

Code snippet:

private async void ScrollOwner_Scrolled(object? sender,
  ScrolledEventArgs e)
  {
      var scrollView =
  sfGrid1.GetVisualContainer().ScrollOwner;
      if (scrollView != null)
      {
          await
  scrollView.ScrollToAsync(scrollView.ScrollX, e.ScrollY, false);
      }
  }

Regards,Sethupathy D.Attachment: SfDataGridSample_(2)_9cfd23ba.zip

Phunction · Answer

Hi, there is an issue with this metod, if the # of rows do not fill the grid, when scrolling the 2nd larger grid, the first row header grid suddenly jumps to the bottom. I modified you example to show it.

This only seems to happen on iOS.

Attachment: sfgridscroll_7f6f4b45.zip

Sethupathy Devarajan · Answer

Hi
Phunction,We
have gone through the sample provided. It seems the first grid jumps to the
bottom when performing horizontal scrolling in iOS platform. We can prevent
this behavior using the highlighted code snippet provided below.Code snippet:

public MainPage()
  {
      InitializeComponent();
     
  sfGrid1.GetVisualContainer().ScrollOwner.Scrolled +=
  ScrollOwner_Scrolled1;

sfGrid.GetVisualContainer().ScrollOwner.Scrolled +=
  ScrollOwner_Scrolled;
  }
   
  private async void
  ScrollOwner_Scrolled1(object? sender, ScrolledEventArgs e)
  {
      if
  (e.ScrollY != 0)
      {
          await
  sfGrid.GetVisualContainer().ScrollOwner!.ScrollToAsync(0, e.ScrollY, false);
      }
  }
   
  private async void
  ScrollOwner_Scrolled(object? sender, ScrolledEventArgs e)
  {
      if (e.ScrollY
  != 0)
      {
          var scrollView =
  sfGrid1.GetVisualContainer().ScrollOwner;
          if (scrollView != null)
          {
              await
  scrollView.ScrollToAsync(scrollView.ScrollX, e.ScrollY, false);
          }
      }
  }

Regards,Sethupathy
D.

Phunction · Answer

This fixes the manuall scrolling, however if you use the

ScrollToColumnIndex() option, for example:sfGrid1.ScrollToColumnIndex(sfGrid1.Columns.Count - 1);the problem occurs and the grid jumps to the bottom.

Sethupathy Devarajan · Answer

Hi Phunction,When scrolling programmatically, It seems the first grid
jumps to the bottom in iOS platform. We can prevent this behavior using the
highlighted code snippet provided below.Code snippet:

public MainPage()
  {
      InitializeComponent();
     
  sfGrid1.GetVisualContainer().ScrollOwner.Scrolled += ScrollOwner_Scrolled1;

sfGrid.GetVisualContainer().ScrollOwner.Scrolled += ScrollOwner_Scrolled;
  }
   
  private async void ScrollOwner_Scrolled1(object? sender,
  ScrolledEventArgs e)
  {
      if (e.ScrollY > 0)
      {
          await
  sfGrid.GetVisualContainer().ScrollOwner!.ScrollToAsync(0, e.ScrollY, false);
      }
  }
   
  private async void ScrollOwner_Scrolled(object? sender,
  ScrolledEventArgs e)
  {
      if (e.ScrollY > 0)
      {
          var scrollView
  = sfGrid1.GetVisualContainer().ScrollOwner;
          if (scrollView
  != null)
          {
             
  await scrollView.ScrollToAsync(scrollView.ScrollX, e.ScrollY, false);
          }
      }
  }

Regards,Sethupathy D.

Phunction · Answer

I found that even with the frozen column set to 0, it is still very slow to scroll if there is a decent amount of data.

For example, 30 columns by 100 rows. When you first load the data, it is very difficult to get it to respond and scroll vertically or horizontally. If I finally get it to scroll horizontally to the end of the columns, then it seems to speed up a little, almost like it is loading some cache for items that were not visible yet. But it is still slow to scroll and sometimes unresponsive to the touch, you tend to have to swipe severs

Is there a way to have it only refresh cells that are visible? It seems like when you scroll it is trying to refresh or update all the cells, even the ones that are not on screen.

This is on iOS.

I have tried this

LoadUIView = false (I add the columns programatically)

I also tried this

EnableDataVirtualization="True"

But 0 difference.

Sethupathy Devarajan · Answer

Hi Phunction,

We suspect you are encountering a scrolling issue on the iOS platform.
We are unclear about your query. To assist you further and understand the issue
better, we kindly request you to provide the following details that may help us
reproduce the problem.
 
 DataGrid Settings in your
     sample.
 Collections used in your
     sample (ie Observable collection or DataTable).
 Please specify the nuget
     version you are encountering the issue.
 Additionally, please
provide a video recording demonstrating the issue for better
clarity.

Regards,Sethupathy D.

Phunction · Answer

The case for this:https://github.com/dotnet/maui/issues/19135 Is closed and claims it was fixed, is that the case? See previous comments on this subject.

Sethupathy Devarajan · Answer

Hi Phunction,
We have checked this on our end, and it is not resolved yet. We will update the issue with the revised sample and notify you once we have updated the framework with the revised sample. Regards,
Sethupathy D.

Sethupathy Devarajan · Answer

Hi Phunction,

As we mentioned earlier, we updated the sample and reported it again to the
framework. They considered it a bug, and we have provided the framework report
link for your reference.

Frame work reported link: Clipping
elements in MAUI leads to a degradation in scrolling performance. · Issue
#28629 · dotnet/maui

Regards,
Sethupathy D.

Nguyen Thinh · Answer

hey, we encoutered the same issuse, is there any fixes or workaround?

RiyasHameed MohamedAbdulKhader · Answer

Hi Nguyen Thinh,We would like to inform you that the scrolling performance issue appears to remain unresolved at the framework level. Could you please confirm whether you are using frozen columns in the DataGrid? Additionally, it would be helpful if you could share the DataGrid customizations you have applied. This information will assist us in further investigation and in providing a suitable workaround as soon as possible.Regards,Riyas Hameed M

Nguyen Thinh · Answer

hey we're using frozen columns, the frozen columns is a custom one with many imagebutton, the grid horizontal scrolling performance is very slow, and another problem is when there is more than 2 button in our custom columns and start scrolling vertically then the datagridcelltapped event get the wrong collums index instead of columns zero it get the clipping collumns index instead. Here is our implementation of sfdatagrid. All the code works flawlessly in xamarin. Here the video https://onedrive.live.com/?qt=allmyphotos&photosData=%2Fshare%2FEE7E47CEA99954BF%21s9b275bdc7cbe453bb792ff6d878db8ff%3Fithint%3Dvideo%26web%3D1%26migratedtospo%3Dtrue&sw=bypassConfig&cid=EE7E47CEA99954BF&id=EE7E47CEA99954BF%21s9b275bdc7cbe453bb792ff6d878db8ff&redeem=aHR0cHM6Ly8xZHJ2Lm1zL3YvYy9lZTdlNDdjZWE5OTk1NGJmL0VkeGJKNXUtZkR0RnQ1TF9iWWVOdVA4QkVoc2QzX2trU3hyUVNzR3dCNV9DNXc%5Fd2ViPTE&v=photos

Attachment: sample_code_7e4a9509.zip

RiyasHameed MohamedAbdulKhader · Answer

Hi Nyguyen,We have reviewed your reported query. Regarding the scrolling performance issue when using FrozenColumns in the DataGrid, please note that scrolling may be slightly slower in this scenario. As mentioned earlier, We have already reported this scrolling performance issue to the framework team. Currently, there is no available workaround to improve scrolling performance since it stems from the framework itself. For your reference, we have attached the link to the relevant framework issue below.Framework reported link : Clipping elements in MAUI leads to a degradation in scrolling performance. · Issue #28629 · dotnet/mauiRegarding the CellTapped event, we have created a simple sample based on your provided information and code snippet. In this sample, we implemented a CellTemplate containing more than three buttons, then performed vertical scrolling and tapped on a cell. he event correctly returns the expected column index. We have attached the tested sample for your reference.If the issue persists on your side, could you please modify the attached sample to reproduce the problem with your customizations? This will help us validate and investigate the issue further.Regards,Riyas Hameed MAttachment: DataGridMaui_(2)_2baf21c.zip

Nguyen Thinh · Answer

thanks for the reply, about the clipping issue that's unfortunate hope you'll find the soulution soon. and Regarding the CellTapped event, i have modified the sample you created. and it have the same problem as we encoutered, when you set the CellTemplate containing more than three buttons as the frozencollums, then performed vertical scrolling and tapped on THE FROZEN columns, the columns index is absolutely wrong (i think it get the clipping columns instead of the frozens one). Here is the video https://drive.google.com/file/d/1AYAtk99TR2VomSvb9OiMGhjZnOL-2eZC/view?usp=sharing

Attachment: DataGridMaui_5bd76e73.zip

Nguyen Thinh · Answer

thanks for the reply, about the clipping issue that's unfortunate hope you'll find the soulution soon. and Regarding the CellTapped event, i have modified the sample you created. and it have the same problem as we encoutered, when you set the CellTemplate containing more than three buttons as the frozencollums, then performed vertical scrolling and tapped on THE FROZEN columns, the columns index is absolutely wrong (i think it get the clipping columns instead of the frozens one). Here is the video https://drive.google.com/file/d/1AYAtk99TR2VomSvb9OiMGhjZnOL-2eZC/view?usp=sharing

Attachment: DataGridMaui_5bd76e73.zip

Sanjay Kumar · Answer

Hi @Nguyen Thinh,We have tested a simple sample and found that it didn't work. The issue seems to be in the framework itself . We have reported this issue to the MAUI  framework team.
Reported link: https://github.com/dotnet/maui/issues/22164
We will wait until the Framework team responds. We will do the action plan from our end based on the update from the framework team. We appreciate your patience and understanding in the meantime. Please let us know if you need any further assistance with this. As always, we are happy to help you out. Regards,Sanjay Kumar

Phunction · Answer

It looks like the git hub issue was closed but they are only looking at macos, not iOS and it is still an issue.

Abinesh Palanisamy · Answer

Hi Phunction,

The framework issue mentioned in our previous response is still open on the framework side. We have reported it for both macOS and iOS platforms. The framework team has acknowledged it as a bug and tagged the issue accordingly.

Framework - Clipping elements in MAUI leads to a degradation in scrolling performance. · Issue #28629 · dotnet/maui

We appreciate your patience and understanding in the meantime. Please let us know if you need any further assistance. As always, we are happy to help.

Regards,

Abinesh P