how to create scrollable dynamic gridview

Have a gridview with a dynamic number of rows, but it is never under 50, what I need to do is to have displayed first 20 rows and scroll bar on right side of the gridview so I can scroll and see all other rows. This is the code for gridview and datasource is data table in code behind. Gridview has 7 columns and select button in first column. Thanks
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE"
            BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana" Font-Size="0.7em"
            ForeColor="Black" GridLines="Vertical" Width="1100px" style="left: 117px; position: relative; top: 29px">
            <FooterStyle BackColor="#CCCC99" />
            <RowStyle BackColor="#F7F7DE" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:CommandField ButtonType="Button" ShowSelectButton="True" />
            </Columns>
        </asp:GridView>

Open in new window

LVL 1
kahvedzicAsked:
Who is Participating?
 
maheshsnkrConnect With a Mentor Commented:
Hi kahvedzic,

Try the following steps.

1. Add a style tag in the <head> section of the page and include the css class. (it is shown in the Code SnippetSnippet ID=468906)
2. Set the Scrollbars property of Panel to 'Auto'. [Screenshot is attached - GRD-1.JPG ]
<style type="text/css">
       
        .GridViewHeader 
        { 
              text-align: left; 
              font-size: 8pt; 
              position: relative; 
              color: #ffffff;  
              background-color: #5B7E9F; 
              font-weight: bold; 
              top: expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop-1); 
              left: expression(this.parentNode.parentNode.scrollTop-1); 
              height: 18px; 
        } 

    </style>

Open in new window

GRD-1.JPG
0
 
maheshsnkrCommented:
Try this

1. Place the Gridview inside a panel and adjust its height to a required value (Now i have set Height="250px") and give the Scrollbars Property to 'Auto' ( ScrollBars="Auto")

Then the code will look like the one below.

 <asp:Panel ID="Panel1" runat="server" Height="250px" ScrollBars="Auto">
         <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE"           BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana" Font-Size="0.7em"ForeColor="Black" GridLines="Vertical" Width="1100px" style="left: 117px; position: relative; top: 29px">
     <FooterStyle BackColor="#CCCC99" />
     <RowStyle BackColor="#F7F7DE" />
     <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
     <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
      <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
      <AlternatingRowStyle BackColor="White" />
 
          <Columns>
                <asp:CommandField ButtonType="Button" ShowSelectButton="True" />
            </Columns>
        </asp:GridView>
 </asp:Panel>
0
 
waltersnowslinarnoldCommented:
Try the following, put the gridview inside <div> and set a height
<div style="scroll=auto; height:UrNeedWhich fits 20 rows of the Grid;">
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE"
            BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana" Font-Size="0.7em"
            ForeColor="Black" GridLines="Vertical" Width="1100px" style="left: 117px; position: relative; top: 29px">
            <FooterStyle BackColor="#CCCC99" />
            <RowStyle BackColor="#F7F7DE" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:CommandField ButtonType="Button" ShowSelectButton="True" />
            </Columns>
        </asp:GridView>
</div>

Open in new window

0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
kahvedzicAuthor Commented:
OK this is it, it works, but when I scroll first row with column names (head row) of gridview disappear as I scroll down. How can I make them fixed so they dont move as I scroll?
0
 
waltersnowslinarnoldCommented:
You need to do a trick here then, set the headertext visible as false, and have a <div style="position:fixed;"> above the gridview <div>. this will solve you.

else you should depend on a third party tool called telerik, just refer the following, you'll get an idea.

http://demos.telerik.com/aspnet-ajax/grid/examples/client/virtualscrollpaging/defaultcs.aspx
0
 
waltersnowslinarnoldCommented:
Write a CSS class as below,

.Freezing
{
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}
and do as folows, set the  HeaderStyle-CssClass="Freezing" as below, it'll work for you..

<div style="scroll=auto; height:UrNeedWhich fits 20 rows of the Grid;">
<asp:GridView ID="GridView1" runat="server" HeaderStyle-CssClass="Freezing" BackColor="White" BorderColor="#DEDFDE"
            BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana" Font-Size="0.7em"
            ForeColor="Black" GridLines="Vertical" Width="1100px" style="left: 117px; position: relative; top: 29px">
            <FooterStyle BackColor="#CCCC99" />
            <RowStyle BackColor="#F7F7DE" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:CommandField ButtonType="Button" ShowSelectButton="True" />
            </Columns>
        </asp:GridView>
</div>
0
 
kahvedzicAuthor Commented:
I used the solution with asp:Panel and this trick with <div> position is not working, what is the "trick" with Panel.
0
 
waltersnowslinarnoldCommented:
Try the last hint I sent you, with CSS and HeaderStyle-CssClass set, that will do for you..
0
 
kahvedzicAuthor Commented:
i did this way but still no fixed header, what do I have to do to create CSS class .Freezin? Where do I have to pute code, in code begind, in .aspx page or...?
0
 
waltersnowslinarnoldConnect With a Mentor Commented:
CSS can he added in .aspx <style> tag and use the HeaderStye-CssClass="Freezong" inside <GridView> tag, that is a property. all done in .aspx page, no codebehind required.
0
 
maheshsnkrCommented:
Use the following expressions within the css class

top:expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop-1);
left:expression(this.parentNode.parentNode.scrollTop-1);
0
 
kahvedzicAuthor Commented:
This fix header and it looks perfect when scrolling GridView, but when I scroll complete page everything else is moving in right direction except gridview header and when I scroll down to the end header is in over the GridView.
0
 
maheshsnkrCommented:
Use this css class for Gridview Header

.GridViewHeader
{
      text-align: left;
      font-size: 8pt;
      position: relative;
      color: #ffffff;
      background-color: #5B7E9F;
      font-weight: bold;
      top: expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop-1);
      left: expression(this.parentNode.parentNode.scrollTop-1);
      height: 18px;
}
0
 
kahvedzicAuthor Commented:
now it is not working at all, this is how it looks like
in code-behind I have
Session("myDataTable") = myDt
Me.GridView1.DataSource = myDt
Me.GridView1.Attributes.Add("style", "table-layout:fixed")
Me.GridView1.AutoGenerateColumns = True
Me.GridView1.DataBind()

<body>
<script>
.GridViewHeader
{
      text-align: left;
      font-size: 8pt;
      position: relative;
      color: #ffffff; 
      background-color: #5B7E9F;
      font-weight: bold;
      top: expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop-1);
      left: expression(this.parentNode.parentNode.scrollTop-1);
      height: 18px;
}
</script>
    <form id="form1" runat="server">
    <div>
        <asp:ImageButton ID="Upisi" runat="server" ImageUrl="~/Images/upis_button.jpg" /><div>
    </div>
        <asp:Panel ID="Panel1" runat="server" Height="400px" Width="1100px" ScrollBars="Both">
        <asp:GridView ID="GridView1" runat="server" HeaderStyle-CssClass="GridViewHeader" BackColor="White" BorderColor="#DEDFDE"
             BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana" Font-Size="0.7em"
             ForeColor="Black" GridLines="Vertical" Width="1079px" style="left: 2px; position: relative; top: 2px">
             <FooterStyle BackColor="#CCCC99" />
             <RowStyle BackColor="#F7F7DE" />
             <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
             <SelectedRowStyle BackColor="#333333" Font-Bold="True" ForeColor="Yellow" />
             <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
             <AlternatingRowStyle BackColor="White" />
 
          <Columns>
                <asp:CommandField ButtonType="Button" ShowSelectButton="True" />
            </Columns>
        </asp:GridView>
        </asp:Panel>

Open in new window

0
 
kahvedzicAuthor Commented:
Thanks maheshsnkr this is working great, just what I want.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.