Calculation of Grid Height

[pierre-jean]

Hello

I would need to calculate the height of a grid as it would be if all the rows were visible.

I need this value to change the location of another element just below the grid.
More precisely, the grid and the other component are located within a tablelayoutpanel that has two rows, the top one is of variable height and the second of fixed height.

When the form is resized (or the grid re-loaded), I can have two situations:

1. the grid does not fit in the available space of the first row, in this case I do not need to adjust the position of the second row of the table layoutpanel

2, the grid does not fill the available space of the first row. In this case I need to change the height of the second row in order to have the second element "just" below the grid without having a large white space between the grid and the second element.

I have tried to calculate the grid height as the sum of individual gridrow height but since the gridheight of a non visible row = -1 this does not work.

Therefore I would like to have the height of the grid as if all the rows were visible and the I can proceed with my redimensionning of the layoutpanel.

I am not sure my explanations are clear ..

 

Thanks in advance for any suggestion

Best regards

Pierre-Jean

 

[Dess | Tech Support Engineer, Principal]

Hello, Pierre-Jean, 

The following code snippet demonstrates a sample approach how to calculate the necessary height for RadGridView to display all rows:

        private void RadForm1_Load(object sender, EventArgs e)
        {
            int totalGridHeight = this.radGridView1.Rows.Count * this.radGridView1.TableElement.RowHeight;
            if (this.radGridView1.AllowAddNewRow)
            {
                totalGridHeight += this.radGridView1.TableElement.RowHeight;
            }
            if (this.radGridView1.ShowColumnHeaders)
            {
                totalGridHeight += this.radGridView1.TableElement.TableHeaderHeight ;
            }
            if (this.radGridView1.ShowGroupPanel)
            {
                totalGridHeight += this.radGridView1.GridViewElement.GroupPanelElement.Size.Height;
            }
            this.Text = totalGridHeight + "";
        }

However, following the provided information, I have prepared a sample project to achieve the layout that I suppose you need. The TableLayoutPanel has only 1 column and two rows. The first row contains a grid, the second row contains a button. The TableLayoutPanel.AutoSize property is set to true, the RadGridView.AutoSize property is set to true as well and the rows are setup as follows:

Having this setup, when the rows count in the grid is changed, the grid is resized accordingly and the TableLayoutPanel's first row is adjusted as well. Please refer to the attached gif file illustrating the achieved behavior. I have attached my sample project for your reference.

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[pierre-jean]

Hello Dess

thanks for the information provided that provides the desired gridheight calculation and that allowed me to solve my problem.

My objective was to have the "button" always visible and always right below the grid. Your sample application did not achieve this goal, but I have managed to get it to work.

For information, I attach an animated screen copy of that meets the desired objective and I include the (vb !) code that I used to test it (if of any intereset I can send you the test project)
I have one last question, as you will see, in my code I had to explicitely use a size =32 for the button height, as the property button.height changes when the visibility of the button changes. Is there a property that gives me the button height independetly of its visibility

Thanks again

 

Here is the code:

Public Class RadForm1
    Private rand As New Random
    Public Sub New()
        ' Cet appel est requis par le concepteur.
        InitializeComponent()
        RadGridView1.Columns.Add("I")
        For i = 0 To 10
            RadGridView1.Rows.Add(i)
        Next
    End Sub

    Private Sub RadForm1_Resize(sender As Object, e As EventArgs) Handles Me.Resize
        Dim GridHeight As Integer = RadGridView1.Rows.Count * RadGridView1.TableElement.RowHeight
        If RadGridView1.AllowAddNewRow Then GridHeight += RadGridView1.TableElement.RowHeight
        If RadGridView1.ShowColumnHeaders Then GridHeight += RadGridView1.TableElement.TableHeaderHeight
        If RadGridView1.ShowGroupPanel Then GridHeight += RadGridView1.GridViewElement.GroupPanelElement.Size.Height

        'Check if the Grid + the button fit in the window
        'Note: the button has Dock.top
        '          the grid and the button are in a tablelayout (tl) that is docked in the form

         If GridHeight + 32 > tl.Height Then
            Me.Text = "A: TL=" & tl.Height & " Grid=" & GridHeight & " Button=32"
            'the grid + the button do not fit in the window
            'adjust the tablelayout top line height to the grid height
            tl.RowStyles(0).SizeType = SizeType.Percent
            tl.RowStyles(0).Height = 100
            'set the tablelayout bottom line to the size of the button
            tl.RowStyles(1).SizeType = SizeType.Absolute
            tl.RowStyles(1).Height = 32
        Else
            Me.Text = "B: form=" & tl.Height & " Grid=" & GridHeight & " Button=32"
            'the grid + the button fit in the window
            'adjust the upper line to the height of the grid
            tl.RowStyles(0).SizeType = SizeType.Absolute
            tl.RowStyles(0).Height = GridHeight + 6
            'set the botton line to 100%
            tl.RowStyles(1).SizeType = SizeType.Percent
            tl.RowStyles(1).Height = 100
        End If
    End Sub

    Private Sub RadButton1_Click(sender As Object, e As EventArgs) Handles RadButton1.Click
        RadGridView1.Rows.Clear()
        Dim rowCount As Integer = rand.Next(1, 30)
        RadGridView1.BeginUpdate()
        For i = 0 To rowCount
            RadGridView1.Rows.Add(i)
        Next
        RadGridView1.EndUpdate()
        RadForm1_Resize(Nothing, Nothing)
    End Sub
End Class

[pierre-jean]

Hello

well ....

When I use the above approach in my main application, I have an abnormal display

when I set top line of the tablelayout to the size of the grid (case B above) I have a "white space" of 120 below the grid, as if the gridsize was underestimated by 120 (if I remove 120 from GridHeight every thing works fine) 

I have tried hard, but not been successfull, in replicating this in the test application !!!
If you have any idea why I get this strange display I would be very grateful ...

The result is illustrated in the sceen copy attached (I have set the backcolor of the grid to illustrate the problem)

Thanks a lot 

Pierre-Jean

[Dess | Tech Support Engineer, Principal]

Hello, Pierre-Jean, 

According to the provided gif file, it seems that in some cases the grid shows a vertical scrollbar on your end. I didn't expect that it was part of the requirement. I thought that you want to always show all grid rows. 

The previously suggested solution always shows all grid rows and no vertical scrollbar is expected. The button is indeed always placed just below the grid. Please have a look at the gif file in my previous reply. There is just a slight spacing of 3 px, which can be eliminated by managing the Margin property of each control placed inside TableLayoutPanel:

However, you mentioned that "My objective was to have the "button" always visible and always right below the grid. Your sample application did not achieve this goal, but I have managed to get it to work." Probably I am missing something. Could you please specify what exactly is not observed with the suggested solution? Thank you in advance for your cooperation.

I have reviewed the provided code snippet and I believe that if the first row and the grid are autosized as in the previously attached solution, you will achieve the desired requirement. It wouldn't be necessary to make any calculations for the height and adjust the rows in the TableLayoutPanel.

I am looking forward to your reply.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[pierre-jean]

Hello Dess

I am sorry, I have not been clear in my explanations.

My objective is to have the window split in two parts:

1. the top part that contains the grid, and
2. the bottom part that contains (in this example) a button

The desired behavior is as following:

1. if the grid has too many rows to fit in the top container it "fills" the container and the button is below the top container 
   This is illustrated as "Case 1" in the attached image
2. When the grid has few rows, it must fill the top container and the button must "move" to be immediately below the grid, leaving the spare space at the bottom of the window

When the form is resized, the display needs to adapt to case 1 or case 2.
This is where i Need to calculate the total required height of the grid to check if the grid + the button will fint in the window,
if it will fit I then need to adjust the height of the upper container to the size of the grid
if it does not fit I need to set the height of the upper container to the size of the window - the height of the button and the grid will show with a vertical scroll bar.

My test program does nearly correctly the job, with one exception

• When the window size is reduced, it behaves correctly, i.e. the upper container size is adjusted to the grid height, the grid fills the container and the grid shows a scrolbar, and the button is at the bottom of the window
• However when the size of the window is increased, then I calculate the required height of the grid and set this value to the height of the upper container, in order to have the lower container immediately below the grid.
  But as you can see a space remains below the grid, until a certain point and then the button's location is fixed.
  it is this additional space that  whould not be there.

I also attach my test projec,t, it may make things more clear

I have tried with grid autze set true or false it makes no difference.

Thanks a lot

Best regards

[Dess | Tech Support Engineer, Principal]

Hello, Pierre-Jean, 

The provided detailed explanation is greatly appreciated. It helped me to understand better the precise requirement. 

I have reviewed the provided sample project. The calculation for the grid height seems to be correct. Then, I have noticed that the AutoSizeRows is set to true at design time. That is why the calculation is not correct in this case. The TableElement.RowHeight is respected when all data rows have equal height. However, if the rows are autosized, the RowHeight property doesn't affect the row's height since it is sized according to its content.

I would recommend you to set the AutoSizeRows property to false and then the requirement will be achieved. The attached gif file illustrates better.

I believe that it would fit your scenario.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[pierre-jean]

Hello Dess

Thanks a lot
Indeed changing autosizerows to false solves the problem

Sorry for having be so unclear in my explanations

Best Regards

Pierre-Jean