Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

how to create scrollable dynamic gridview

Posted on 2009-12-16
15
Medium Priority
?
938 Views
Last Modified: 2013-11-26
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

0
Comment
Question by:kahvedzic
  • 6
  • 5
  • 4
15 Comments
 
LVL 4

Expert Comment

by:maheshsnkr
ID: 26060991
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
 
LVL 7

Expert Comment

by:waltersnowslinarnold
ID: 26061131
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
 
LVL 1

Author Comment

by:kahvedzic
ID: 26061219
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 7

Expert Comment

by:waltersnowslinarnold
ID: 26061380
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
 
LVL 7

Expert Comment

by:waltersnowslinarnold
ID: 26061561
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
 
LVL 1

Author Comment

by:kahvedzic
ID: 26061639
I used the solution with asp:Panel and this trick with <div> position is not working, what is the "trick" with Panel.
0
 
LVL 7

Expert Comment

by:waltersnowslinarnold
ID: 26061675
Try the last hint I sent you, with CSS and HeaderStyle-CssClass set, that will do for you..
0
 
LVL 1

Author Comment

by:kahvedzic
ID: 26061990
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
 
LVL 7

Assisted Solution

by:waltersnowslinarnold
waltersnowslinarnold earned 400 total points
ID: 26062009
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
 
LVL 4

Expert Comment

by:maheshsnkr
ID: 26062169
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
 
LVL 1

Author Comment

by:kahvedzic
ID: 26062347
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
 
LVL 4

Expert Comment

by:maheshsnkr
ID: 26069486
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
 
LVL 1

Author Comment

by:kahvedzic
ID: 26070819
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
 
LVL 4

Accepted Solution

by:
maheshsnkr earned 1600 total points
ID: 26071985
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
 
LVL 1

Author Comment

by:kahvedzic
ID: 26072552
Thanks maheshsnkr this is working great, just what I want.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
When you discover the power of the R programming language, you are going to wonder how you ever lived without it! Learn why the language merits a place in your programming arsenal.
Progress
Screencast - Getting to Know the Pipeline

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question