DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 6 of 6

Thread: Datagrid Scrollbar creation...

  1. #1
    Tom Guest

    Datagrid Scrollbar creation...


    I have an apsx page, with a datagrid inside a form.
    I want to limit the size of the datagrid to 15 and
    have a vertical scrollbar so if there more than 15
    entries then the user can scroll down without the
    title of the grid fields moving.

    here is the datagrid:

    <aspataGrid ID =grdEvt
    Runat =server
    align =center
    Height =8
    CellSpacing =2
    CellPadding =1
    AutoGenerateColumns =False>
    <HeaderStyle
    BackColor =#CDC9C9
    CssClass =thd />
    <Columns>
    <asp:BoundColumn
    HeaderStyle-Font-Bold =true
    HeaderText ="ID"
    HeaderStyle-Width =20
    ItemStyle-Width =20
    FooterStyle-Width =20
    HeaderStyle-HorizontalAlign =center
    FooterStyle-HorizontalAlign =center
    ItemStyle-HorizontalAlign =center
    DataField =evtNumber />
    <asp:BoundColumn
    HeaderStyle-Font-Bold =true
    HeaderText ="Timestamp"
    HeaderStyle-Width =150
    ItemStyle-Width =150
    FooterStyle-Width =150
    HeaderStyle-HorizontalAlign =left
    FooterStyle-HorizontalAlign =left
    ItemStyle-HorizontalAlign =left
    DataField =Timestamp />
    <asp:BoundColumn
    HeaderStyle-Font-Bold =true
    HeaderText ="Hardware"
    HeaderStyle-Width =150
    ItemStyle-Width =150
    FooterStyle-Width =150
    HeaderStyle-HorizontalAlign =left
    FooterStyle-HorizontalAlign =left
    ItemStyle-HorizontalAlign =left
    DataField ="PCTitle" />
    <asp:BoundColumn
    HeaderStyle-Font-Bold =true
    HeaderText ="Details"
    HeaderStyle-Width =252
    ItemStyle-Width =252
    FooterStyle-Width =252
    HeaderStyle-HorizontalAlign =left
    FooterStyle-HorizontalAlign =left
    ItemStyle-HorizontalAlign =left
    DataField =Details />
    </Columns>
    </aspataGrid>


    help please...

    Tom.

  2. #2
    Phil Weber Guest

    Re: Datagrid Scrollbar creation...

    > I have an aspx page, with a datagrid inside a form. I want to
    > limit the size of the datagrid to 15 and have a vertical scrollbar
    > so if there more than 15 entries then the user can scroll down
    > without the title of the grid fields moving.


    Tom: The Web Forms DataGrid does not have this functionality built in. One
    option is to embed an ActiveX, Java or Windows Forms grid component in your
    page. If you want to use straight HTML, you'll have to display the scrolling
    data within an IFRAME.
    ---
    Phil Weber



  3. #3
    David Rothgery Guest

    Re: Datagrid Scrollbar creation...


    "Phil Weber" <pweber@nospam.fawcette.com> wrote in message
    news:3d36f30b@10.1.10.29...
    > > I have an aspx page, with a datagrid inside a form. I want to
    > > limit the size of the datagrid to 15 and have a vertical scrollbar
    > > so if there more than 15 entries then the user can scroll down
    > > without the title of the grid fields moving.

    >
    > Tom: The Web Forms DataGrid does not have this functionality built in. One
    > option is to embed an ActiveX, Java or Windows Forms grid component in

    your
    > page. If you want to use straight HTML, you'll have to display the

    scrolling
    > data within an IFRAME.


    Not necessarily. You could wrap the DataGrid in a DIV tag and use CSS to
    force scrollbars, likes so...

    <DIV style="height: 15em; overflow-y: scroll;">
    <aspatagrid ...
    </aspatagrid>
    </DIV>

    At least, that will certainly work in IE6, and will probably work in IE5+,
    Opera 5+, and Netscape 6+. And it may work in IE4.x, but I wouldn't count on
    it.


    --
    Dave Rothgery
    drothgery@alum.wpi.edu



  4. #4
    Phil Weber Guest

    Re: Datagrid Scrollbar creation...

    > Not necessarily. You could wrap the DataGrid in a DIV
    > tag and use CSS to force scrollbars, likes so...


    Dave: Very cool, thanks! I hadn't seen an example of a scrollable DIV that
    displays standard scrollbars. A google search for "scrollable div," in fact,
    returns the following example, which does exactly what Tom is looking for
    (but with standard HTML controls, not a DataGrid):
    http://www.siteexperts.com/tips/html/ts04/page1.asp
    ---
    Phil Weber



  5. #5
    Tom Guest

    Re: Datagrid Scrollbar creation...


    "David Rothgery" <drothgery@alum.wpi.edu> wrote:
    >
    >"Phil Weber" <pweber@nospam.fawcette.com> wrote in message
    >news:3d36f30b@10.1.10.29...
    >> > I have an aspx page, with a datagrid inside a form. I want to
    >> > limit the size of the datagrid to 15 and have a vertical scrollbar
    >> > so if there more than 15 entries then the user can scroll down
    >> > without the title of the grid fields moving.

    >>
    >> Tom: The Web Forms DataGrid does not have this functionality built in.

    One
    >> option is to embed an ActiveX, Java or Windows Forms grid component in

    >your
    >> page. If you want to use straight HTML, you'll have to display the

    >scrolling
    >> data within an IFRAME.

    >
    >Not necessarily. You could wrap the DataGrid in a DIV tag and use CSS to
    >force scrollbars, likes so...
    >
    ><DIV style="height: 15em; overflow-y: scroll;">
    > <aspatagrid ...
    > </aspatagrid>
    ></DIV>
    >
    >At least, that will certainly work in IE6, and will probably work in IE5+,
    >Opera 5+, and Netscape 6+. And it may work in IE4.x, but I wouldn't count

    on
    >it.
    >
    >
    >--
    >Dave Rothgery
    >drothgery@alum.wpi.edu
    >
    >

    Thanks Dave,
    That is almost perfect, one final thing:
    My datagrid is aligned to the center, is it possable to "attach" the scrollbar
    to the side of the datagrid?

    Thanks again
    Tom.

  6. #6
    David A. Rothgery Guest

    Re: Datagrid Scrollbar creation...

    Tom <Tom.Ashley@UKAutomation.com> wrote:
    >
    > "David Rothgery" <drothgery@alum.wpi.edu> wrote:
    > >
    > >"Phil Weber" <pweber@nospam.fawcette.com> wrote in message
    > >news:3d36f30b@10.1.10.29...
    > >> > I have an aspx page, with a datagrid inside a form. I want to
    > >> > limit the size of the datagrid to 15 and have a vertical scrollbar
    > >> > so if there more than 15 entries then the user can scroll down
    > >> > without the title of the grid fields moving.
    > >>
    > >> Tom: The Web Forms DataGrid does not have this functionality built in.

    > One
    > >> option is to embed an ActiveX, Java or Windows Forms grid component in

    > >your
    > >> page. If you want to use straight HTML, you'll have to display the

    > >scrolling
    > >> data within an IFRAME.

    > >
    > >Not necessarily. You could wrap the DataGrid in a DIV tag and use CSS to
    > >force scrollbars, likes so...
    > >
    > ><DIV style="height: 15em; overflow-y: scroll;">
    > > <aspatagrid ...
    > > </aspatagrid>
    > ></DIV>


    [...]

    > Thanks Dave,
    > That is almost perfect, one final thing:
    > My datagrid is aligned to the center, is it possable to "attach" the scrollbar
    > to the side of the datagrid?


    Well, the obvious solution didn't work for me (which was defining a Css
    class with the height and overflow properties set, then setting the
    CssClass property of the DataGrid). You might be able to get a good
    approximation by setting the alignment and width properties of the DIV
    to match the DataGrid. Or maybe you'd want the DIV a little wider, to
    leave room for the scrollbar.

    The hard way -- defining a custom control that derrives from DataGrid
    (or it's immediate base class) -- would work, but that may take a bit of
    time to get right.

    --
    Dave Rothgery
    Picking nits since 1976
    drothgery@alum.wpi.edu
    http://drothgery.editthispage.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center