Turning on the Horizontal Scroll bar

[Deborah]

Hi -

I understand from reading other threads that the automatic horizontal scroll bar feature does not work if the grid is set to column fill.

Is there a way to manually turn on the horizontal scroll bar?

I would like column fill on for the case when the user resizes the form larger. But if the user resizes the form smaller, I need a scroll bar so that the user can see all of the columns.

Any tips would be appreciated.

Thanks!

[Emanuel Varga]

Hello Deborah,

There is no "clean" way of doing this, but you can use the parent's AutoScrollMinSize property to solve the problem.
Just set the AutoScrollMinSize to the same size as the control's minimum size, which forces the parent to evaluate when to show scrollbars based on the AutoScrollMinSize instead of the size/position of its controls.

Something like this:

radGridView1.MinimumSize = new Size(400, 300);
this.AutoScrollMinSize = radGridView1.MinimumSize;

But the downside of this is that the entire form will be recalculated, or you can use the cleaner version in my opinion but you will need an extra scrollable panel (or another container) to achieve this, like so:

var minSize = new Size(400, 300);
var radScrollablePanel1 = new RadScrollablePanel();
radScrollablePanel1.Dock = DockStyle.Fill;
radScrollablePanel1.AutoScrollMinSize = minSize;
this.Controls.Add(radScrollablePanel1);

radScrollablePanel1.Controls.Add(radGridView1 = new RadGridView());
radGridView1.Dock = DockStyle.Fill;
radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
radGridView1.MinimumSize = minSize;

Sorry the converter is not working this morning so i cannot provide the VB version :(

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[Deborah]

I know C#, and the only real difference when it comes to this type of code is the ";" and this => me.

Thanks, I will give this a try.

[Emanuel Varga]

... and adding of event handlers, which the Telerik code converter still cannot convert....

Please let me know if this is OK, or if you need any more help.

Best Regards,
Emanuel Varga

[Deborah]

I tried the first option thinking that would be easier for the dev team which already have quite a few of these grids on forms. But once I set the grid's minimum size, it no longer works correctly with the Anchor tag. See the attached screen shots.

One screen shot shows the "normal" size of the form. The other screen shot shows how the controls now slide under the grid.

[Emanuel Varga]

Hello again,

No, if you have a setup like that you will not be able to use the first version...

The only downside to the second one is that you have to wrap the grid in another container...

Please let me know how it goes

Best Regards,
Emanuel Varga

[Deborah]

Won't it have the same problem since it also requires setting the minimum size?

[Emanuel Varga]

Please try it, it will work,
See attachments.

Best Regards,
Emanuel Varga

[Deborah]

I have been trying this for about an hour now and cannot get the scroll bars to appear. Is there some other property somewhere I need to set?

My property values are shown below:

'
'RadScrollablePanel1
'
Me.RadScrollablePanel1.Anchor = CType((((System.Windows.Forms.AnchorStyles.Top Or System.Windows.Forms.AnchorStyles.Bottom) _
            Or System.Windows.Forms.AnchorStyles.Left) _
            Or System.Windows.Forms.AnchorStyles.Right), System.Windows.Forms.AnchorStyles)
Me.RadScrollablePanel1.AutoScroll = True
Me.RadScrollablePanel1.AutoScrollMargin = New System.Drawing.Size(0, 0)
Me.RadScrollablePanel1.AutoScrollMinSize = New System.Drawing.Size(700, 100)
Me.RadScrollablePanel1.Location = New System.Drawing.Point(10, 12)
Me.RadScrollablePanel1.MinimumSize = New System.Drawing.Size(700, 100)
Me.RadScrollablePanel1.Name = "RadScrollablePanel1"
Me.RadScrollablePanel1.Padding = New System.Windows.Forms.Padding(1)
Me.RadScrollablePanel1.PanelContainer.AutoScroll = True
Me.RadScrollablePanel1.PanelContainer.AutoScrollMinSize = New System.Drawing.Size(700, 100)
Me.RadScrollablePanel1.PanelContainer.Controls.Add(Me.WaitingListGridView)
Me.RadScrollablePanel1.PanelContainer.Dock = System.Windows.Forms.DockStyle.Fill
Me.RadScrollablePanel1.PanelContainer.Location = New System.Drawing.Point(1, 1)
Me.RadScrollablePanel1.PanelContainer.Name = "PanelContainer"
Me.RadScrollablePanel1.PanelContainer.Size = New System.Drawing.Size(709, 391)
Me.RadScrollablePanel1.PanelContainer.TabIndex = 0
'
'
'
Me.RadScrollablePanel1.RootElement.MinSize = New System.Drawing.Size(700, 100)
Me.RadScrollablePanel1.RootElement.Padding = New System.Windows.Forms.Padding(1)
Me.RadScrollablePanel1.Size = New System.Drawing.Size(711, 393)
Me.RadScrollablePanel1.TabIndex = 18
Me.RadScrollablePanel1.Text = "RadScrollablePanel1"

[Emanuel Varga]

Did you set the MinSize for the grid?

Please try the following example:

using System;
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;
using Telerik.WinControls.UI;

public partial class Form1 : Form
{
    private RadGridView radGridView1;
    private Telerik.WinControls.UI.RadScrollablePanel radScrollablePanel1;

    public Form1()
    {
        InitializeComponent();
        this.Size = new Size(706, 488);
        this.radScrollablePanel1 = new Telerik.WinControls.UI.RadScrollablePanel();
        this.radScrollablePanel1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
                    | System.Windows.Forms.AnchorStyles.Left)
                    | System.Windows.Forms.AnchorStyles.Right)));
        this.radScrollablePanel1.Location = new System.Drawing.Point(13, 13);
        this.radScrollablePanel1.PanelContainer.Dock = System.Windows.Forms.DockStyle.Fill;

        this.radScrollablePanel1.Size = new System.Drawing.Size(536, 351);

        this.Controls.Add(this.radScrollablePanel1);

        var minSize = new Size(400, 300);
        radScrollablePanel1.AutoScrollMinSize = minSize;

        radScrollablePanel1.Controls.Add(radGridView1 = new RadGridView());
        radGridView1.Dock = DockStyle.Fill;
        radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
        radGridView1.MinimumSize = minSize;

        radGridView1.Size = new System.Drawing.Size(this.ClientSize.Width, this.ClientSize.Height - 24);
        radGridView1.Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom;

        var button = new RadButton();
        button.Text = "Click me";
        button.Dock = DockStyle.Bottom;
        this.Controls.Add(button);
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
        this.radGridView1.DataSource = new ProductsCollection(1000);
    }
}

#region Helpers

public class Product : INotifyPropertyChanged
{
    private int id, buyerId;

    public int BuyerId
    {
        get { return buyerId; }
        set
        {
            buyerId = value;
            OnPropertyChanged("BuyerId");
        }
    }

    public int Id
    {
        get { return id; }
        set
        {
            id = value;
            OnPropertyChanged("Id");
        }
    }

    public Product(int id, int buyerId)
    {
        this.Id = id;
        this.BuyerId = buyerId;
    }

    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

public class Buyer
{
    public int Id
    {
        get;
        set;
    }

    public string Name
    {
        get;
        set;
    }

    public Buyer(int id, string name)
    {
        this.Id = id;
        this.Name = name;
    }
}

public class ProductsCollection : BindingList<Product>
{
    public ProductsCollection(int noItems)
    {
        for (int i = 0; i < noItems; i++)
        {
            this.Add(new Product(i, i + 10));
        }
    }
}

public class BuyersCollection : BindingList<Buyer>
{
    public BuyersCollection(int startIndex, int lenght)
    {
        for (int i = 0; i < 10; i++)
        {
            this.Add(new Buyer(i + 10, "Buyer" + (i + 1)));
        }
    }
}

#endregion Helpers

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[Deborah]

I tried your example and it gives me double-scroll bars in the vertical direction. I attached a screen shot.

I tried setting the grid's AutoScroll to False, but that did not seem to help.

I still don't see what is different on mine ... but I will keep at it.

[Emanuel Varga]

Hello again,

Replace this in my code and it will not show vertical scrollbars anymore:

var minSize = new Size(400, 0);

It was showing also vertical scrollbars because you also set a minimum height for the grid, so you had the scrollpanel scrollbars to scroll down the control, and also the scrollbars for the grid to scroll rows.

Best Regards,
Emanuel Varga

[Deborah]

OK, I found the biggest problem. I am using one of the forms from the project that was created by one of the developers on the team. He had set the user control's minimum size (the grid is on a user control that populates the display area of our main form). So it was not getting small enough to show the scroll bars. I took that off and it now appears to be working.

I am going to do more testing.

Thank you again for your assistance!

[Emanuel Varga]

Hello Deborah,

Sorry for the late answer, but if you need more help please let me know:
And just for clarification purposes, this is what you have to do to achieve this:
- Set the grid minimum's size to the minimum size required for that grid;
- Set the container for the grid (autoscrollpanel or a normal panel) to that same minimum size;

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[Deborah]

Part of what was mentally challenging was that, visually, I really did not want the "minimum size" of the grid. Rather, I need to set the autoscroll size to the maximum size of the grid that I want to appear before I want the scroll bars to appear. The grid can then get significantly smaller (or the viewport that the user is seeing gets significantly smaller.)

In any case, I was finally able to get this to work.

So I have provided my grid control to the other members of the team. Until they find something I missed, I *finally* have a grid that supports all of the features I need for my client's requirements.... thanks to all of your efficient, clear, concise, and patient assistance.

Thank you VERY much!

[Phi]

I have similar need as Deborah. When I implemented the suggestion you made here, I faced with a new problem. The vertical scroll bar of the grid could be hidden by the horizontal scroll bar (see attached picture). How do I turn off the grid's vertical scroll bar and let the scrollable panel takes over that job?

Thanks,

Phi

[Emanuel Varga]

Hello Phi,

You could do this by calculating the height required in order to display the whole grid (if you are using custom sized rows it is a tad more complicated, but doable) but the problem with this will be performance, the grid, by default just loads the rows that are displayed, if you force the minimum size of the grid to be the entire size of the grid (so that all the rows are visible) you will loose a lot performance wise, but if you really want to do this, please let me know and i will provide an example on how to do this.

Best Regards,
Emanuel Varga

[Phi]

I opted for turning off the Fill option and try to adjust the column's width myself. I just need to figure out the columns' total width and the remain empty width so I could adjust the last column's width or distribute the extra width across the columns. But somehow the calculated width is always off a bit! I am having problem figure out the current width of all the columns! Do you have any suggestion?

private int CalcColumnsWidth()
{
    int width = 0;

    foreach (var column in gridView.Columns)
        width += column.Width;

    return width + gridView.ColumnCount + 1; //take into the vertical lines between columns and borders
}

public void FillWidth()
{
    if (gridView.ColumnCount == 0)
        return;

    var width = CalcColumnsWidth();

    if (width < gridView.ClientSize.Width)
        gridView.Columns[gridView.ColumnCount - 1].Width += gridView.ClientSize.Width - width;
}

private void gridView_Resize(object sender, EventArgs e)
{
    gridView.MasterTemplate.BestFitColumns();
    FillWidth();
}

[Deborah]

Yes, I had to turn off the Fill option as well. And I ended up with code similar to yours.

I then have code in *many* places that add 10 and then subtract 10 from the width in order for the grid to resize. (I tried just calling invalidate, but contrary to the documention this does not seem to cause the system to repaint the grid.)

So I have all of this "hack" code everywhere trying to force the grid to resize in order to make it display properly.

I am truly bummed about the HUGE amount of time I have spent on this when I sold the client on "let's get a third party control to save us time"!

[Phi]

Ha ha ha! Yup! That is the gotcha when you don't evaluate a product deeply enough. It is the little thing that eats up a whole lot of time!!! However, I have to admit that Telerik support staffs are very good at their jobs.

I did post my solution to this problem on another thread. It may help with your problem

[Jack]

Hi Phi and Deborah,

As you have found in other forum threads, you can not show horizontal scrollbar in RadGridView when the AutoSizeColumnsMode is set to Fill. This behavior is by design and we should change a lot in order to support the desired scenario. Nevertheless, it seems that this is a wanted feature and we will consider implementing it in a future version of RadGridView.

Phi, RadGridView uses asynchronous layout and it can be performed with a small delay after resizing the control. You can change this by calling the UpdateLayout method. Consider the following code snippet:

void radGridView1_Resize(object sender, EventArgs e)
{
    this.radGridView1.RootElement.UpdateLayout();
    int newWidth = this.radGridView1.Columns[0].Width;
    //...
}

I hope it helps. 
 
Best wishes,
Jack
the Telerik team

[Phi]

For a simple quick fix, you guys could expose out the method that does the Filling so we could call it and be done with :)