We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to resize the parent grid and DetailsViewDataGrid simultaneously?

Platform: WPF |
Control: SfDataGrid

In SfDataGrid, 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.


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))
             if (parentGrid.Columns.Count != e.DetailsViewDataGrid.Columns.Count)
            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)
            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())
            if (!CanResize(grid))
            var columnIndex = grid.HelperResolveToGridVisibleColumnIndex(scrollColumnIndex);
            if (columnIndex < 0)
            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.



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:




2X faster development

The ultimate WPF UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile