Arrange for buttons to lie directly under grid

[Bob]

I want to place a row of buttons underneath a grid View such that they always lie under the last row, with no white space (except margin).
When the grid expands to the bottom of the form, the buttons are still visible (at the bottom), and the grid displays vertical scroll bars.

There must be some combination of gridViewElements, panels, docking, etc. that does this? 

[Dess | Tech Support Engineer, Principal]

Hello Bob,

Thank you for contacting Telerik Support.

The appropriate way to achieve your requirement is to use RadGridView (Docked to Top), RadPanel (Docked to Top) and position all RadButtons inside this RadPanel. Thus, when resizing the form, the panel with its buttons remains always exactly under the grid. Please, have a look at the attached sample project. You may find more information about docking controls on the following KB article. 

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

[Bob]

Hi Desislava,
I'm afraid your solution is not right for me.  The grid is a constant size for one thing.

Here is more precisely what i am looking for:
If there is 1 row of data then I want the grid to be 1 row high with the buttons underneath and the rest of the form empty.
If there are 10 rows of data then I want the grid to be 10 rows high with the buttons underneath and the rest of the form empty.
If there are 1000 rows of data (the grid would be bigger than the form) then I want the grid with vertical scrollbar to fill the form but leave space for the buttons which are now at the bottom of the form.

When I re-size the form, the buttons stay under the grid, which re-sizes itself to the available space as above and shows/hides the vertical scrollbars as appropriate.

Is that possible?

[Dess | Tech Support Engineer, Principal]

Hello Bob,

Thank you for writing back.

Please have a look at the modified code snippet, which functionality is demonstrated in the attached picture: 

private void Form1_Load(object sender, EventArgs e)
{
    this.order_DetailsTableAdapter.Fill(this.nwindDataSet.Order_Details);

    int numberOfVisibleRows = 100;

    if (numberOfVisibleRows <= 10)
    {
        int headerRowHeight = radGridView1.TableElement.TableHeaderHeight;
        int newRowHeight = (radGridView1.TableElement.Children[0].Children[0].Children[1] as GridNewRowElement).Size.Height;
        int filterRowHeight = (radGridView1.GridViewElement.Children[0].Children[0].Children[0].Children[0] as StackLayoutElement).Size.Height;

        this.radGridView1.Height = filterRowHeight + headerRowHeight + newRowHeight + radGridView1.TableElement.RowHeight * numberOfVisibleRows;
        this.radGridView1.Dock = DockStyle.Top;
        this.radPanel1.Dock = DockStyle.Top;
        this.Controls.SetChildIndex(this.radPanel1, 0);
    }
    else
    {
        this.radPanel1.Dock = DockStyle.Bottom;
        this.radGridView1.Dock = DockStyle.Fill;
        this.Controls.SetChildIndex(this.radGridView1, 0);
    }
}

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

[Bob]

Hi Desislava,
That's still not right.
I was using the number 10 for example and not hard-wired.
The number of rows in the grid could be any number, and could increase/decrease by user action.
The height of the form could be anything, and it can re-size.
Under all circumstances the buttons should be directly under the grid (no white space) with the grid expanding to hold all rows.  The grid stops expanding when the size of the grid + buttons reaches the size of the form, in which case scroll bars are displayed in the grid.

This would be so easy in WPF or Silverlight (which is what I've been doing for the last 2 years).

I was hoping that some arrangement of panels/dock, etc would work.  But it seems that I have to calculate everything by hand and use the re-size events of the grid and form to calculate where to put the buttons? Is that right, do you think?

regards,
Bob McNaught

[Dess | Tech Support Engineer, Principal]

Hello Bob,

Thank you for contacting us again,

If I understand correctly, the attached sample project shows how to implement both of your requirements: 

• having a small number of rows with grid height just enough to show them and docked buttons immediately below the grid;

• having a greater number of rows so the grid will display a vertical scroll-bar and docked buttons immediately below the grid; when re-sizing the form, the grid will be also re-sized, but the buttons are always visible to the bottom of the form and their size is auto-adjusted;

I have replaced the RadPanel with TableLayoutPanel in order to achieve correct buttons re-sizing when re-sizing the form.

Note that when the user manipulate the number of grid data rows (changes the data source, add/ remove rows), it is necessary to determine whether to dock the grid to Fill or not (this logic is represented in my if/else construction).

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

[Bob]

Dear Desislava,
That is better but still not right.
It looks right if you bind to a data-source with hundreds of rows, as your example does.
But if the data-source has only 5 rows then the buttons are placed at the bottom of the form and the grid at the top with lots of white-space in between.

The buttons should be under the grid at all times, and the scroll-bars should appear whenever the grid needs them.

Sorry to be such a nuisance.

regards,
bob

PS. I use this binding style (copied from your gridView help pages) as it makes it really easy to change the number of rows:

            ArrayList list = new ArrayList();
            for (int i = 0; i < 5; i++)
            {
                list.Add(new ValueType<string>("string " + (i + 1).ToString()));
            }

           this.radGridView1.DataSource = list;
---
   public class ValueType<T>
    {
        T item;

        public ValueType() { }

        public ValueType(T item)
        {
            this.item = item;
        }

        public T ItemProperty
        {
            get { return this.item; }
            set { this.item = value; }
        }
    }

[Dess | Tech Support Engineer, Principal]

Hello Bob,

Thank you for contacting us again,

Please have a look at the form Load method in my sample project. numberOfVisibleRows variable has a comment next to it which explains how to show both of the scenarios depending on its value. Find attached a sample video (drag and drop over the browser to play) demonstrating both of the scenarios. Depending on how many visible rows you have at a certain moment, the appropriate approach should be chosen.

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik