How to resize the parent grid and DetailsViewDataGrid simultaneously in UWP Grid ?
In UWP DataGrid, while resizing the parent grid column, the DetailsViewDataGrid’s corresponding column is not resized, even if both the parent grid and the DetailsViewDataGrid have the same number of columns. When you want to resize the DetailsViewDataGrid’s columns while resizing the parent grid columns, you can do so with the help of SfDataGrid.DetailsViewLoading event and SfDataGrid.ResizingColumns event of SfDataGrid as shown in the following code examples.
C#
class SfDataGridBehavior : Behavior<SfDataGrid>
{
protected override void OnAttached()
{
// Wire events for parent grid.
this.AssociatedObject.ResizingColumns += AssociatedObject_ResizingColumns;
this.AssociatedObject.DetailsViewLoading += AssociatedObject_DetailsViewLoading;
}
void AssociatedObject_DetailsViewLoading(object sender, DetailsViewLoadingAndUnloadingEventArgs e)
{
var parentGrid = e.OriginalSender is DetailsViewDataGrid ? (e.OriginalSender as SfDataGrid) : sender as SfDataGrid;
if (!CanResize(parentGrid))
return;
if (parentGrid.Columns.Count != e.DetailsViewDataGrid.Columns.Count)
return;
double width = 0;
var detailsViewStartColumnIndex = e.DetailsViewDataGrid.ResolveToStartColumnIndex();
// Set child grid width based on parent grid's columns width.
for (int i = 0; i < parentGrid.Columns.Count; i++)
{
width = i == 0 ? parentGrid.Columns[i].ActualWidth - detailsViewStartColumnIndex * 24 : parentGrid.Columns[i].Width;
if (e.DetailsViewDataGrid.Columns[i].Width != parentGrid.Columns[i].Width)
e.DetailsViewDataGrid.Columns[i].Width = width;
}
}
void AssociatedObject_ResizingColumns(object sender, ResizingColumnsEventArgs e)
{
var grid = sender as SfDataGrid;
// For detailsview grid, sender is RootDataGrid, so you need to get OriginalSender.
if (e.OriginalSender is DetailsViewDataGrid)
grid = e.OriginalSender as SfDataGrid;
if (grid.View == null)
return;
SetWidth(grid, e.ColumnIndex, e.Width);
}
/// <summary>
/// Decides whether the child grid columns should be resized based on the parent grid.
/// </summary>
/// <param name="dataGrid">parent DataGrid</param>
/// <returns>bool</returns>
private bool CanResize(SfDataGrid dataGrid)
{
if (dataGrid.DetailsViewDefinition == null && !dataGrid.DetailsViewDefinition.Any())
return true;
foreach (var definition in dataGrid.DetailsViewDefinition)
{
var detailsViewGrid = (definition as GridViewDefinition).DataGrid;
if (detailsViewGrid.DetailsViewDefinition == null && !detailsViewGrid.DetailsViewDefinition.Any())
return CanResize(detailsViewGrid);
if (detailsViewGrid.Columns.Count != dataGrid.Columns.Count)
return false;
}
return true;
}
/// <summary>
/// Recursively set width in all levels.
/// </summary>
/// <param name="grid">SfDataGrid</param>
/// <param name="scrollColumnIndex">scrollColumnIndex</param>
/// <param name="width">width</param>
private void SetWidth(SfDataGrid grid, int scrollColumnIndex, double width)
{
if (grid.DetailsViewDefinition == null || !grid.DetailsViewDefinition.Any())
return;
if (!CanResize(grid))
return;
var columnIndex = grid.HelperResolveToGridVisibleColumnIndex(scrollColumnIndex);
if (columnIndex < 0)
return;
var parentstartcolumnnIndex = grid.HelperResolveToStartColumnIndex();
var indentcolumnsWidth = 0;
foreach (var definition in grid.DetailsViewDefinition)
{
var detailsViewDataGrid = (definition as GridViewDefinition).DataGrid;
var startcolumnnIndex = detailsViewDataGrid.HelperResolveToStartColumnIndex();
indentcolumnsWidth = startcolumnnIndex * 24;
var tempWidth = width - indentcolumnsWidth < 0 ? 0 : width - indentcolumnsWidth;
detailsViewDataGrid.Columns[columnIndex].Width = scrollColumnIndex == parentstartcolumnnIndex ? tempWidth : width;
// If DetailsViewDataGrid has DetailsViewDefinition, recursively set width upto all levels.
if (detailsViewDataGrid.DetailsViewDefinition != null && detailsViewDataGrid.DetailsViewDefinition.Any())
SetWidth(detailsViewDataGrid, detailsViewDataGrid.HelperResolveToScrollColumnIndex(columnIndex), detailsViewDataGrid.Columns[columnIndex].Width);
}
}
protected override void OnDetaching()
{
// Unwire events for parent grid.
this.AssociatedObject.ResizingColumns -= AssociatedObject_ResizingColumns;
this.AssociatedObject.DetailsViewLoading -= AssociatedObject_DetailsViewLoading;
}
}
In DetailsViewLoading event, the DetailsViewDataGrid columns width has been set based on the parent grid’s column width. When the parent grid has nested levels, you need to use SfDataGrid.DetailsViewLoading event for all levels. Refer the attached sample for nested level.
In ResizingColumns event, based on new width, after resizing the parent grid column, DetailsViewDataGrid’s column width is set.
In the above examples, GridHelperClass methods are used for resolving Row and Column index in both parent grid and DetailsViewDataGrid.
By default, parent grid and DetailsViewDataGrid have some space in between, since SfDataGrid.DetailsViewPadding is set. For displaying parent grid and DetailsViewDataGrid in the same line, you need to set DetailsViewPadding as 0, as shown in the following code example.
XAML
By using the above examples, you can resize the parent grid and the DetailsViewDataGrid columns at the same time, if both the grids have equal number of columns only. It is applicable for nested levels also. The following links contain samples for both single level and nested level DetailsViewDataGrid.
Sample links:
Conclusion
I hope you enjoyed learning about how to resize the parent grid and DetailsViewDataGrid simultaneously in UWP Grid.
You can refer to our UWP DataGrid feature tourpage to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our UWP DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
