C# .NET - GridView

Asked By Mackvin Pereira on 30-Jan-12 11:59 PM
hello


   i am using gridview on page with scroll bar .
 
   i want to if user scroll over grid view it should scroll till last record at top without scrolling the whole page

  please help
smr replied to Mackvin Pereira on 31-Jan-12 12:01 AM
hi

try this


<head runat="server">
<title>Creating scrollable GridView with fixed headers</title>
<style type="text/css">
  .header
  {
  font-weight:bold;
  position:absolute;
  background-color:White;
  }
  </style>
</head>



protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  {
 
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      if(e.Row.RowIndex == 0)
       e.Row.Style.Add("height","40px");
    }
  }


follow
http://csharpdotnetfreak.blogspot.com/2009/07/scrollable-gridview-fixed-headers-asp.html
http://forums.asp.net/t/1384011.aspx/1
Jitendra Faye replied to Mackvin Pereira on 31-Jan-12 12:02 AM
For this we need to add css to headers of gridview to keep them on the top.

First of all place a Panel on the aspx page from thetoolbox. Set height to 200px and width to 200px
and scrollbars to Vertical.
Now add a gridview inside this Panel and set the datasource to populate gridview.



<form id="form1" runat="server"> <div> <asp:Panel ID="Panel1" runat="server" Height="200px" Width="200px" ScrollBars="Vertical"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" RowStyle-VerticalAlign="Bottom" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> <asp:BoundField DataField="Location" HeaderText="Location" SortExpression="Location" /> </Columns> <HeaderStyle CssClass="header"Height="20px" /> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]"> </asp:SqlDataSource> </asp:Panel> </div> </form>

01.<head runat="server">
02.<title>Creating scrollable GridView with fixed headers</title>
03.<style type="text/css">
04..header
05.{
06.font-weight:bold;
07.position:absolute;
08.background-color:White;
09.}
10.</style>
11.</head>


01.protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
02.{
03. 
04.if (e.Row.RowType == DataControlRowType.DataRow)
05.{
06.if(e.Row.RowIndex == 0)
07.e.Row.Style.Add("height","40px");
08.}
09.}


Let me know.
smr replied to Mackvin Pereira on 31-Jan-12 12:03 AM
hi

apply this CSS style sheet to gridview

<style type="text/css">
     .fixedHeader
     {
      overflow: auto;
      height: 150px;
     }
    </style>
Venkat K replied to Mackvin Pereira on 31-Jan-12 12:33 AM
Mackvin,

AFAIK there are two best and easiest ways to embed the gridview in <div> tag or <panel>, below are two simple examples which you can refer:

GridView inside <div > HTML tag
To produce GridView scrollbars with div tag, use this code:

<div style="width:100%; height:300; overflow:auto;">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>

GridView inside Panel Control
To create GridView scrollbars with a little help of Panel control, use this code:

<asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="300" Width="100%">
 <asp:GridView ID="GridView1" runat="server">
 </asp:GridView>
</asp:Panel>

 

Thanks

dipa ahuja replied to Mackvin Pereira on 31-Jan-12 06:06 AM
<script type="text/javascript" language="javascript">
  function fixHeader() {
    var t = document.getElementById("table");
    var thead = t.getElementsByTagName("thead")[0];
    var t1 = t.cloneNode(false);
    t1.appendChild(thead);
    tableHeader.appendChild(t1)
  }
  window.onload = fixHeader
</script>
 
<http://dotnetslackers.com/Community/blogs/kaushalparik/archive/2008/06/28/vertically-scrollable-repeater-with-fixed-headers.aspx>