Adding height at runtime to radgridview

1 Answer 25 Views
GridView
Reshma
Top achievements
Rank 1
Reshma asked on 05 Jul 2022, 09:03 PM | edited on 05 Jul 2022, 09:03 PM

Hello, 

In line with your recommendation to set a fixed height on the radgridview to get good performance (ref.https://www.telerik.com/account/support-center/view-ticket/1568065)  we have set a custom height on the content presenter that hosts the radgridview.

  <ContentPresenter ContentTemplate="{StaticResource PerBondTraderControlsKey}" Content="{Binding BondControlsVM}"
                                  Width="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadLayoutControl}, Path=ActualWidth}">
                                <ContentPresenter.Height>
                                    <MultiBinding Converter="{StaticResource HeightConverter}">
                                        <Binding Path="ActualHeight" RelativeSource="{RelativeSource AncestorType=Grid}" />
                                        <Binding Path="." RelativeSource="{RelativeSource AncestorType=Grid}" />
                                    </MultiBinding>
                                </ContentPresenter.Height>
                            </ContentPresenter>

 

The presentor is hosted on a grid and the objective is for it to resize based on the collapsible layoutcontrolexpandergroup placed above it. Refer to the attached file for the complete page hosting both controls. What we require is for the contentpresentor hosting the radgridview to resize to fit the available space based on the collapsible layout control's expanded status. Please suggest on how this can be implemented.

 

Thanks

Reshma

 

1 Answer, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 06 Jul 2022, 12:06 PM

Hello Reshma,

Thank you for the provided file.

Based on it, I created a small sample project in an attempt to resemble your setup. By using an appropriate converter, I was able to dynamically calculate the height of the ContentPresenter with respect to the other children from its parent LayoutControlGroup.

Here's the code of interest:

    public class HeightConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            var layoutControl = values[1] as RadLayoutControl;
            var panel = layoutControl.ChildrenOfType<LayoutControlPanel>().First();
            var layoutControlGroup = layoutControl.ChildrenOfType<LayoutControlGroup>().First();
            var children = layoutControlGroup.Items;
            var height = children.OfType<FrameworkElement>().Where(x => x != values[2]).Sum(x => x.ActualHeight);
            return Math.Max(0, layoutControl.ActualHeight - height - 100);
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

As you can notice, I sum the heights of all other elements in the group (other than the group hosting the ContentPresenter) and subtract this from the height of the layout control. In addition, I've hardcoded a value of 100 for all the margins, padding, and the height of the tabs which you can actually also calculate dynamically if this is necessary.

Do note that I've also set a fixed height for the two TextBlock controls to avoid their stretching, which interfered with the height calculations.

Please have a look at the provided project and let me know if a similar approach works for you in your original application. If that is not the case, please modify this project to better resemble your setup and requirement and I will gladly assist you further.

Regards,
Dilyan Traykov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Reshma
Top achievements
Rank 1
commented on 06 Jul 2022, 06:16 PM

Thanks Dilyan,

I went through your sample. My requirement is slightly different. I'm expecting the grid to resize to occupy the available space based off the expander being expanded or collapsed. The height converter is only hit once during load of the control and subsequent expander expand/collapse events dont seem to refire the conversion and so the height remains constant.

I was able to set the size using a custom behavior on the radlayout like below, note that  I'd like to use a expander collapsed / expanded event but since that doesnt seem to be available on the LayoutControlExpanderGroup I worked around using a bound property to the datacontext and listening to its change.  Couple of questions

1. Is there an event that could be used to listen to the expand status changed in the behavior?

2. The LayoutControlExpanderGroup doesnt seem to reflect the actual height in the code below. Perhaps the actual size is computed at a later stage. How can we capture the correct height to calculate available space.

 

public class HeightUpdateBehavior : Behavior<RadLayoutControl>
    {
        private RadLayoutControl RadLayoutControl
        {
            get
            {
                return AssociatedObject as RadLayoutControl;
            }
        }

        protected override void OnAttached()
        {
            base.OnAttached();
            RadLayoutControl.Loaded += RadLayoutControl_Loaded;
        }

        private void RadLayoutControl_Loaded(object sender, RoutedEventArgs e)
        {
            INotifyPropertyChanged context = (RadLayoutControl.DataContext as INotifyPropertyChanged);
            context.PropertyChanged += Context_PropertyChanged;
        }

       
        
        private void Context_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "IsFilterExpanded")
            {
                TraderControlsViewModel traderControlsViewModel = RadLayoutControl.DataContext as TraderControlsViewModel;
                var panel = RadLayoutControl.ChildrenOfType<Filters>().FirstOrDefault();
                double height = panel?.ActualHeight+50 ?? 500;
                if (!traderControlsViewModel.IsFilterExpanded)
                    height = 30;

                (RadLayoutControl.FindName("GridContentPresenter") as ContentPresenter).Height = Math.Max(0, RadLayoutControl.ActualHeight - height - 50); ;
            }
        }

     
        protected override void OnDetaching()
        {
            base.OnDetaching();
            INotifyPropertyChanged context = (RadLayoutControl.DataContext as INotifyPropertyChanged);
            context.PropertyChanged -= Context_PropertyChanged;
            RadLayoutControl.Loaded -= RadLayoutControl_Loaded;

        }



    }

Dilyan Traykov
Telerik team
commented on 11 Jul 2022, 12:17 PM

Hello Reshma,

Thank you for the provided code snippet.

To answer your inquiries:

1. You can handle the SizeChanged event of the LayoutControlExpanderGroup in order to adjust the height of the grid accordingly.

2. I believe you can also use this event to capture the correct height to calculate the remaining available space.

As an alternative, I've also adjusted the converter from my previous reply to take into account any change in the ActualHeight of the ExpanderGroup to achieve what I now believe to be the expected behavior.

Can you please have a look at the updated project and let me know if it accomplishes your requirement?

Tags
GridView
Asked by
Reshma
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Share this question
or