473,390 Members | 1,723 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,390 software developers and data experts.

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 68615
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

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

Similar topics

2
by: Javier Martinez | last post by:
Hi Is there any way to set a horizontal scrollbar in a gridview? Thanks in advance Javier
4
by: Gunawan | last post by:
Hi, I have a gridview inside a table <table>...</table> I have define explicitly wide of the table, for example 800px. If we need gridview which is inside 800px table wider than table wide, how...
1
by: madhurisajja | last post by:
Hi All, I have a Gridview inside a Panel and i have set overflow to auto for the scroll bars to appear. I have a server side code that handles the up and down key arrows. The problem i have is...
3
by: Jimmy B | last post by:
Hello folks, Does anyone of you know any Open Source GridView Extension that has vertical Scrollbar and fixed Header? Tried to Google but didn't find any proper (because of Css). It should...
1
by: =?Utf-8?B?Um9iZXJ0IFNtaXRo?= | last post by:
Hi, I have a problem whereby I have a gridview bound to a dataset with a large number of items, However when I select an item near the bottom by using the scrollbar, when the gridview gets...
5
AnuSumesh
by: AnuSumesh | last post by:
Hi All, I am using <asp:Gridview> to display my data. I am adding columns and rows dynamically. I am facing following issues: 1. I want scrollbars around the gridview and for this purpose i...
18
by: btreddy | last post by:
Hii all, In one my child page i've an updatepanel which contains a gridview .The gridview displays huge amt of data (~3 pages of data) and the updatepanel refreshes for every 1 sec,for tht i've...
0
by: NareshN | last post by:
Hi All, I am trying freez first column of each row in gridview using Css but it is not working. <link href="Includes/Styles1.css" rel="stylesheet" type="text/css" /> ...
3
by: NareshN | last post by:
Hi All, Can u tell me how to freeze gridview header and first column of each row in IE 8. I am below code but it is not working for me.The same code is working fine in Sample which i ...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.