Binding to the same set of columns on two different datagrids - Does not synchronise layout

[Zia]

Hi,

I have multiple SfDataGrids where I want them to have the same column structure and layout, but I want to show different rows in each table. To do this I have bound the ItemsSource to a different collection for each table, and then for the columns I bind to the same set of Columns.

        <syncfusion:SfDataGrid Grid.Row="0"
                               ItemsSource="{Binding Path=Collection1}"
                               Columns="{Binding Path=Columns}"
                               AllowDraggingColumns="True"
                               AllowResizingColumns="True">
        </syncfusion:SfDataGrid>


        <syncfusion:SfDataGrid Grid.Row="1"
                               ItemsSource="{Binding Path=Collection2}"
                               Columns="{Binding Path=Columns}"
                               AllowDraggingColumns="True"
                               AllowResizingColumns="True">
        </syncfusion:SfDataGrid>

I want to be able to reorder and resize the columns and have this change reflected in both tables. The column widths and layout should be synchronised at all times. However this does not work as expected.

1) If I move a column using the first datagrid, it moves on the second datagrid but fails to resize correctly.

Moved "Id" from first to second place and it has not resized corectly on the bottom table.

2) Additionally, if I resize a column on the second table, it only resizes the column on the first table.

Resized "Id" on the bottom table to be larger, but the change is only visible on the top table.

The only way to see the correctly sized columns after any operation is to resize the whole window which forces all the tables to update. I have attached some example code.

Thanks,
Zia

Attachment: DataGridExample_f47d8d0d.zip

[Gokul S Subramani]

Hi Zia,

We appreciate you providing an exact query, which makes it easier for us to solve this issue. Based on your information, you are binding the same set of columns to two different DataGrids. When dragging columns in DataGrid1, the columns in DataGrid2 do not resize properly. This occurs because resizing a column in DataGrid1 refreshes the GridColumnSizer correctly, but DataGrid2 does not resize properly because it shares the same set of columns but not the same widths. So, while the column in DataGrid2 changes, its width does not.

To resolve this, you need to refresh the GridColumnSizer for both DataGrid1 and DataGrid2 in the column’s changed event. Specifically, call the Refresh method on the GridColumnSizer for each DataGrid whenever a column is resized. This ensures that both DataGrids maintain the correct column sizes in sync with each other.

We have resolved the reported issue and modified your workaround based on your requirements. Please review the updated solution below. If you need further assistance, feel free to let us know. We are happy to help.

Thanks for your understanding and cooperation.

Best Regards,

Gokul S

Attachment: Ticket191619_e96b7a71.zip