How to synchronize horizontal scroll position between multiple SfGrids

[Eric Lyons]

I have multiple grids arranged vertically above each other. The grids have a similar column layout with a few frozen columns on the left and several scrollable columns on the right. I need to autoscroll other grids whenever a user scrolls in one of the grids to keep them synchronized horizontally. I can't seem to find the correct JavaScript to inject or connect. Hopefully, someone has a small working example. 

Thanks.

[Sanjay Kumar Suresh]

Hi Eric Lyons,

We've created a custom sample from our end to fulfill your requirement. In this implementation, when any grid on the page is horizontally scrolled, the corresponding grids rendered below also scroll in sync. This behavior is achieved by capturing the scrollLeft value of the scrolled grid and applying it to the scrollable elements of the other grids.

Using this approach, we've successfully achieved the requested functionality.

Code Snippet:

  protected override async Task OnAfterRenderAsync(bool firstRender)

  {

      if (firstRender)

      {

          await JS.InvokeVoidAsync("syncGridScroll", "grid1", new[] { "grid2", "grid3" });

          await JS.InvokeVoidAsync("syncGridScroll", "grid2", new[] { "grid1", "grid3" });

          await JS.InvokeVoidAsync("syncGridScroll", "grid3", new[] { "grid1", "grid2" });

      }

  }

 

 

JavaScript.js

window.syncGridScroll = (sourceGridId, targetGridIds) => {

        const sourceContent = document.querySelector(`#${sourceGridId} .e-content`);

        const targetContents = targetGridIds.map(id => document.querySelector(`#${id} .e-content`));

 

        if (!sourceContent || targetContents.some(content => !content)) return;

 

        sourceContent.addEventListener('scroll', () => {

            const scrollLeft = sourceContent.scrollLeft;

            targetContents.forEach(content => {

                if (content.scrollLeft !== scrollLeft) {

                    content.scrollLeft = scrollLeft;

                }

            });

        });

};

We have attached the concern sample demonstrating the implemented behavior please check and let us know if you have any concerns. If we’ve misunderstood your requirement, kindly share more detailed information about the expected behavior so we can assist you more effectively.

Regards,

Sanjay Kumar Suresh

Attachment: SupportTickets_dcaadf1a.7z

[Eric Lyons]

Thanks for the quick response. That works perfect. I'm not sure if I should ask this follow up question in a new post or not, so I'll just ask here for now.

The multiple grids also have AllowResizing="true" to let the user change the column sizes. I'm trying to use the ResizeStoppedEvent to sync up the column size in other grids. The method  RefreshColumnsAsync() doesn't seem to work.  Below are snippets of my code.

Would a more javascript approach be better?

<GridEvents TValue="OrderDetails" ResizeStopped="args => OnResizeStopped(args, 1)" />

private SfGrid<OrderDetails>[] Grids => new[] { grid1, grid2, grid3 };

private async Task OnResizeStopped(Syncfusion.Blazor.Grids.ResizeArgs args, int gridId)

{

    // Sync width to other grids:

    for (var i = 0; i < Grids.Length; i++)

    {

        if (i != gridId-1)

        {

            var otherGrid = Grids[i];

            var cols = await otherGrid.GetColumnsAsync();

            foreach (var col in cols)

            {

                if (col.Field == args.Column.Field)

                {

                    col.Width = args.Column.Width.ToString();

                    break;

                }

            }

            otherGrid.Columns = cols;

            await otherGrid.RefreshColumnsAsync();

        }

    }

}

[Sanjay Kumar Suresh]

Hi Eric Lyons,

We would like to inform you that achieving user interactions between two separate Grids, as described, is currently not feasible due to limitations in interaction handling across components.

We truly appreciate your understanding in this matter. If you have any alternative approaches in mind or additional requirements, please feel free to share them with us—we’ll be more than happy to explore possible solutions and assist you further.

Regards,

Sanjay Kumar Suresh