add scrollbar in gridview

[sandeepk84]

Hi all,

Does anyone know how we can add a ScrollBars into a GridView when it has a lot of columns to display?


Thanks and Regards...
Sand.

[vinaykeshav]

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.

hi all...
does anyone know how we can add a scrollbar into a gridview when it's having a lot of columns to display???
please help...
thanks and regards...
sand...

[sandeepk84]

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.

Thanks a lot Vinay....
Earlier i had tried using div...then i was not able to get it...
but now i got it...
thanks,
sand...

[Nir]

thanks alot vinaykeshav
you are the best...
really it"s the best answer!
good for you man..
Nir

[satane]

HI Vinay,

i did the whole process.But i am not getting scoll bar to lable also.can u please currct my code.in which case i did worng.i am sending my code here

<label id=lab runat="server" style="overflow: auto">h<asp:GridView
                   AllowSorting=True   
                   ID="grdView" 
                   runat="server"
                   Width="47%" 
                   GridLines="Horizontal" 
                   PageSize =18
                   OnPageIndexChanging="grdView_PageIndexChanging"
                   OnSorting ="grdView_OnSorting"
                   DataKeyNames="Boss" Height="1px"  AutoGenerateColumns=true Enabled=true
 
                   >
 
               <RowStyle Backcolor="#E1E1FF" />
        <HeaderStyle BackColor="RosyBrown" ForeColor="Green" />
                              </asp:GridView>
            i&nbsp;</label>

[ayhtut]

Hi, use <asp:Label> , not <label>... but I can't get it in firefox.. but for IE , it's ok :) ...

HI Vinay,

i did the whole process.But i am not getting scoll bar to lable also.can u please currct my code.in which case i did worng.i am sending my code here


<label id=lab runat="server" style="overflow: auto">h<asp:GridView
AllowSorting=True
ID="grdView"
runat="server"
Width="47%"
GridLines="Horizontal"
PageSize =18
OnPageIndexChanging="grdView_PageIndexChanging"
OnSorting ="grdView_OnSorting"
DataKeyNames="Boss" Height="1px" AutoGenerateColumns=true Enabled=true

>

<RowStyle Backcolor="#E1E1FF" />
<HeaderStyle BackColor="RosyBrown" ForeColor="Green" />
</asp:GridView>
i&nbsp;</label>

[shalu2singh]

how to fetch data in dropdownlist within gridview?
what is datasource ID in dropdownlist?

[Shashi Sadasivan]

how to fetch data in dropdownlist within gridview?
what is datasource ID in dropdownlist?

A datasource in a dropdownlist is the source from where it populates its list.
To find the data selected in this dropdownlist, you will have to use the findcontrol method for that row in the datagrid.

I havent really coded this myself(just been helping and watching this code) , but this is how it was done in my project

[kunal pawar]

hi all...
does anyone know how we can add a scrollbar into a gridview when it's having a lot of columns to display???
please help...
thanks and regards...
sand...

You can used:

<div id='div1' style="width:'100%'; height:'50%'; overflow:scroll;">
<datagrid>
</datagrid>
</div>

[Deepti05]

You can used

<div id='div1' style="width:'100%'; height:'50%'; overflow:scroll;">
<datagrid>
</datagrid>
</div>

But if no row is there then empty space will be there how to remove that space when there is no row in grid

[kunal pawar]

Simple make div to runat="server" and at time of bind data checked Dataset having rows or not. If no then visible false to the DIV

[Deepti05]

but then we have fixed the width i want the width of the gridview to vary according to no of rows till 5 rows and after that scrolling to be there

[Frinavale]

ASP.NET Labels render as HTML <span> </span> elements.
ASP.NET Panels render as HTML <div> </div> elements.

An HTML <span> element has a CSS display type of "inline" by default; whereas an HTML <div> element has a CSS display type of "block" by default.

Because the <span> is inline, you cannot set the height and width of it. It automatically adjusts it's size according to the contents that are within it: making it "inline".

But the <div> is displayed as a block, so you can set the height and width of it.

If you set the height and width of an element that has a display type of block, the content inside it will not change the height and width of that element.

That is where the overflow style comes into play.

If you set the CSS overflow to "scroll" for a block element, scroll bars will be provided so that the user can scroll the content that is too large to fit in the defined area. If you specify that the overflow should be "hidden" then the content will be cut off where it doesn't fit. If it's set to "visible" then the content will appear outside of the defined area.

So, now back to the question: How do you display scroll bars for a grid that is too large for the page?

The answer is to wrap the GridView inside an element that has a CSS display:block style.

Since ASP.NET Panels are rendered HTML <div> elements... and since <div> elements have a block style by default. All you have to do is set the the Panel's height and width to the desired dimensions and set it's CSS style to have overflow:scroll.

You don't have to use an ASP.NET Panel if you don't plan on working with the Panel in your server side code. You could simply wrap the GridView in a <div> element and set it's dimensions and overflow styles.

Here's an example with a Panel:

<asp:Panel ID="scrollableGridArea" runat="server" style="overflow:scroll; height: 50px; width: 50px">
  <asp:GridView ID="myGrid" runat="server />
</asp:Panel>

Here's an example using a <div>:

<div style="overflow:scroll; height: 50px; width: 50px">
  <asp:GridView ID="myGrid" runat="server />
</div>

If you really want to use a Label or <span> for some crazy reason, you can set the CSS display:block. But it's really pointless when there's the div/Panel.

-Frinny