469,300 Members | 2,165 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,300 developers. It's quick & easy.

add scrollbar in gridview

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.
Dec 18 '06 #1

✓ answered by 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:
Expand|Select|Wrap|Line Numbers
  1. <asp:Panel ID="scrollableGridArea" runat="server" style="overflow:scroll; height: 50px; width: 50px">
  2.   <asp:GridView ID="myGrid" runat="server />
  3. </asp:Panel>
Here's an example using a <div>:
Expand|Select|Wrap|Line Numbers
  1. <div style="overflow:scroll; height: 50px; width: 50px">
  2.   <asp:GridView ID="myGrid" runat="server />
  3. </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

12 68317
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...
Dec 18 '06 #2
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...
Dec 18 '06 #3
Nir
3
thanks alot vinaykeshav
you are the best...
really it"s the best answer!
good for you man..
Nir
May 21 '07 #4
satane
4
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

Expand|Select|Wrap|Line Numbers
  1. <label id=lab runat="server" style="overflow: auto">h<asp:GridView
  2.                    AllowSorting=True   
  3.                    ID="grdView" 
  4.                    runat="server"
  5.                    Width="47%" 
  6.                    GridLines="Horizontal" 
  7.                    PageSize =18
  8.                    OnPageIndexChanging="grdView_PageIndexChanging"
  9.                    OnSorting ="grdView_OnSorting"
  10.                    DataKeyNames="Boss" Height="1px"  AutoGenerateColumns=true Enabled=true
  11.  
  12.                    >
  13.  
  14.                <RowStyle Backcolor="#E1E1FF" />
  15.         <HeaderStyle BackColor="RosyBrown" ForeColor="Green" />
  16.                               </asp:GridView>
  17.             i&nbsp;</label>
Aug 17 '07 #5
ayhtut
1
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>
Sep 8 '07 #6
how to fetch data in dropdownlist within gridview?
what is datasource ID in dropdownlist?
Oct 25 '07 #7
Shashi Sadasivan
1,435 Expert 1GB
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
Oct 25 '07 #8
kunal pawar
297 100+
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:
Expand|Select|Wrap|Line Numbers
  1. <div id='div1' style="width:'100%'; height:'50%'; overflow:scroll;">
  2. <datagrid>
  3. </datagrid>
  4. </div>
Oct 25 '07 #9
You can used
Expand|Select|Wrap|Line Numbers
  1. <div id='div1' style="width:'100%'; height:'50%'; overflow:scroll;">
  2. <datagrid>
  3. </datagrid>
  4. </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
Jan 16 '08 #10
kunal pawar
297 100+
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
Jan 21 '08 #11
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
Jan 28 '08 #12
Frinavale
9,735 Expert Mod 8TB
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:
Expand|Select|Wrap|Line Numbers
  1. <asp:Panel ID="scrollableGridArea" runat="server" style="overflow:scroll; height: 50px; width: 50px">
  2.   <asp:GridView ID="myGrid" runat="server />
  3. </asp:Panel>
Here's an example using a <div>:
Expand|Select|Wrap|Line Numbers
  1. <div style="overflow:scroll; height: 50px; width: 50px">
  2.   <asp:GridView ID="myGrid" runat="server />
  3. </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
Mar 20 '12 #13

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Javier Martinez | last post: by
4 posts views Thread by Gunawan | last post: by
1 post views Thread by madhurisajja | last post: by
3 posts views Thread by Jimmy B | last post: by
1 post views Thread by =?Utf-8?B?Um9iZXJ0IFNtaXRo?= | last post: by
3 posts views Thread by NareshN | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.