You will have more control of the placement of this control if you get it onto the form by dragging and dropping the control rather than hand coding it in the html window.

What we will be doing is putting the datagrid inside of an html label control and then setting the overflow parameter of the label to the appropriate scroll bar setting. After this a few formatting tricks to make it look more natural will be added. You could take this one step further and turn the whole thing into user control.

Build the Scrolling Control

Here's how I make it work.

Drop a DataGrid Web control onto the page and resize it to the size you would like.

Then drop an HTML Label Control onto the page. This is the same as a <div>. I am using the html version, since I do not need any of the extra features (or overhead) associated with a Web control. I would recommend giving this control an id, so that it is easier to find when making further changes.

Next, I can drag the datagrid inside of the label. You know you've got it in the right spot to drop when the label suddenly gains focus. When you drop the grid, the label will automatically resize itself to the size of the grid.

Additionally, you will notice that there is an anchor in the upper left corner of the label which will allow you to drag the combined controls. It is possible to select the individual controls as well in the design screen so that you can affect either of them as needed.

The next key step is to enable the scroll bar. You do this by going into the STYLE properties of the label. Rather than manually editing them, open up the style builder for the control. This can be done by right clicking on the label and choosing "Build Style" or clicking on the ellipsis on the style parameter in the properties window.

On the layout page of the style builder, there is an option for Overflow. Overflow has five settings. One of these is blank, two are for scrolling and two are for clipping. I use the "Use Scrollbars if Needed" selection.

Formatting

There is some formatting you need to do. First, I fine tune the size of my datagrid. Remember that the label will resize itself based on the datagrid size while you are in design mode. I make sure that the grid is wide enough to accommodate all of my columns so that I won't get a horizontal scroll bar ever. Then I size the label, adding enough extra width to accommodate the vertical scroll bar without stealing from the datagrid's width. Otherwise, you will still get the horizontal scroll bar whenever it is necessary to add the vertical.

Note: Do not stretch the datagrid vertically. When you do this, the grid will stretch itself during run time to fill the height of the label if does not have enough rows to fill that space.

Another issue I had was the visual difference between the grid with the scroll bar and without. When the scroll bar is visible, the bottom row seemed to float, there was no visual definition of the bottom of the grid. Putting borders around the label looked nice when the datagrid was overflowing, but it looked very bad when the datagrid was smaller than the defined area. My solution was to use color. Since my datagrid was already using a color scheme, I chose the base color used for rows and made that the background color of the label control.

Another formatting issue is one of personal style. With this setup, when you scroll down, your header rows of the datagrid will disappear as they get sucked under the top of your label control. To avoid this, you may want to get rid of the headers row for the datagrid and draw them back in using a table just above the label control.

Here is an example of a div/datagrid combo that is going into overflow mode. In this sample, I have left the header rows for the datagrid intact. But if I scroll down, I will not see the header row any more.

Since the scroll bar is set to "if needed", this is what the scrolling grid looks like when it is not overflowing.