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

Resizing a datagrid to fit space up to a max height

Is there a way to query the data grid to get the height that it requires to render?

I have a screen that can contain one or more datagrids, each constrained in their own custom UIView container.  I don't know how many rows will be in the grid until after the layout is initially done (and rows may be added or removed at any time.)  If the grid only contains a few rows, it takes as much space on screen as needed to display its rows, but no more.  It shrinks to fit the data. If the grid is larger than a maximum height value, it is constrained and scrolls as needed. within the space allotted to it.

Is there a way to query the height that the grid requires?  I could possible query each row for its height until I either reach the end or reach the maximum, but I was not sure if this was the best approach.  

Or, is there a better way to resize the table (and its container) so that it only takes up the required amount of space?

Also, is there an event that gets triggered when the grid.ItemsSource updates the grid cells?

3 Replies

PS Pavithra  Sivakumar Syncfusion Team April 6, 2017 03:35 AM UTC

Hi Clint, 
Thanks for contacting Syncfusion Support, 
We have analyzed your requirement.  
1.Resizing the grid rows can be achieved by using QueryRowHeight event. 
Refer the below code example to achieve your requirement. 
private void Datagrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) 
     if (e.RowIndex != 0) 
         var availablegridsize = datagrid.Frame.Height - datagrid.HeaderRowHeight; 
        if (viewModel.OrdersInfo.Count < (availablegridsize / datagrid.RowHeight)) 
              datagrid.RowHeight = availablegridsize / viewModel.OrdersInfo.Count; 
2. Regarding your second query, event for item source change is presently not available. We will consider this as an enhancement. 
Pavithra S 

CA Clint Anderson April 12, 2017 01:10 PM UTC

Thank you for the example.  This is not quite the functionality that I need.  I need to resize the entire grid, not the grid rows.

Here's a scenario:
If my maximum height is 250, and my header height is 40.
If I have 5 rows with heights 50, 60, 55, 60, and 50, my grid will be at height 250, and will require scrolling to see the last row
If I have 2 rows with heights 50 and 60, my grid will resize to height 150 to fill only the height that is required for the header and the 2 rows.  Layout constraints on the grid and it's surrounding components will adjust to use the space that is no longer taken up by the grid.

Additionally, I am getting a bit of odd behavior with the grid in the example that was provided. I've seen similar issues in my app as well.  In the ViewModel, if you call SetRowstoGenerate(5), when the grid is initially displayed it only shows 3 rows.  If you start scrolling the grid, the remaining 2  rows appear.

DS Divakar Subramaniam Syncfusion Team April 13, 2017 10:46 AM UTC

Hi Clint Anderson, 
Thanks for the update. 
We have checked your query and we are prepared a simple sample by achieved your query and you can download the same from the below link. 
In the sample, we have listened the CollectionChanged event of the collection bound to the SfDataGrid. In that event, we have calculated the actual row height and modify the SfDataGrid’s frame which will call the ViewDidLayoutSubviews override in which we set the SfDataGrid’s frame based on the calculated height. 
Regarding your second query, we were not able to reproduce the issue on our side and all the 5 rows are layout properly in grid if we call SetRowGenerate(5). You can also refer the above sample for this query since we have populated only 5 rows in the above sample. If the issue still persists on your side, then please do revert us with modified sample reproducing the issue which will help us to analyze further. 

Live Chat Icon For mobile
Up arrow icon