add scrollbar in gridview

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • sandeepk84
    New Member
    • Oct 2006
    • 97

    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.
    Last edited by Frinavale; Mar 20 '12, 06:51 PM. Reason: Fixed garammar
  • vinaykeshav
    New Member
    • Dec 2006
    • 25

    #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.


    Originally posted by sandeepk84
    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...

    Comment

    • sandeepk84
      New Member
      • Oct 2006
      • 97

      #3
      Originally posted by 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.

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

      Comment

      • Nir
        New Member
        • May 2007
        • 3

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

        Comment

        • satane
          New Member
          • Jun 2007
          • 4

          #5
          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

          Code:
          <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>
          Last edited by Frinavale; Mar 20 '12, 06:49 PM. Reason: Added code tags.

          Comment

          • ayhtut
            New Member
            • Sep 2007
            • 1

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

            Originally posted by 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:Gri dView
            AllowSorting=Tr ue
            ID="grdView"
            runat="server"
            Width="47%"
            GridLines="Hori zontal"
            PageSize =18
            OnPageIndexChan ging="grdView_P ageIndexChangin g"
            OnSorting ="grdView_OnSor ting"
            DataKeyNames="B oss" Height="1px" AutoGenerateCol umns=true Enabled=true

            >

            <RowStyle Backcolor="#E1E 1FF" />
            <HeaderStyle BackColor="Rosy Brown" ForeColor="Gree n" />
            </asp:GridView>
            i&nbsp;</label>

            Comment

            • shalu2singh
              New Member
              • Oct 2007
              • 1

              #7
              how to fetch data in dropdownlist within gridview?
              what is datasource ID in dropdownlist?
              Last edited by shalu2singh; Oct 25 '07, 05:48 AM. Reason: one question add

              Comment

              • Shashi Sadasivan
                Recognized Expert Top Contributor
                • Aug 2007
                • 1435

                #8
                Originally posted by shalu2singh
                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

                Comment

                • kunal pawar
                  Contributor
                  • Oct 2007
                  • 297

                  #9
                  Originally posted by sandeepk84
                  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:
                  Code:
                  <div id='div1' style="width:'100%'; height:'50%'; overflow:scroll;">
                  <datagrid>
                  </datagrid>
                  </div>
                  Last edited by Frinavale; Mar 20 '12, 06:49 PM. Reason: Added code tags and fixed grammar

                  Comment

                  • Deepti05
                    New Member
                    • Jan 2008
                    • 2

                    #10
                    Originally posted by kunal pawar
                    You can used
                    Code:
                    <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
                    Last edited by Frinavale; Mar 20 '12, 06:50 PM.

                    Comment

                    • kunal pawar
                      Contributor
                      • Oct 2007
                      • 297

                      #11
                      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

                      Comment

                      • Deepti05
                        New Member
                        • Jan 2008
                        • 2

                        #12
                        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

                        Comment

                        • Frinavale
                          Recognized Expert Expert
                          • Oct 2006
                          • 9749

                          #13
                          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:
                          Code:
                          <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>:
                          Code:
                          <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

                          Comment

                          Working...