Visible Headers with scrolling - GRIDVIEW RSS

• • Reply
  

  sam233

  Member

  36 Points

  218 Posts

  Visible Headers with scrolling - GRIDVIEW

  Dec 06, 2012 12:04 PM|LINK

  I've searched and tried to apply the solution for visible headers in gridview, when scrolling... but im having no luck... so i have you can help me out...

  I have a simple gridview, but i would like the column headers of the table to stay static, is there anyway i can achieve this?

  thanks,

  scripts attached.

  <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master.Master" CodeBehind="PatientList.aspx.vb" Inherits="Chaplaincy.PatientList" %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  </asp:Content>
  
  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <form id="form1" runat="server">
  
      <div style="height: 450px; overflow-y: scroll">
  
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
          DataKeyNames="IDENTIFIER" DataSourceID="NCRSDB"
          GridLines="None" AllowPaging="false" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
          PageSize="20">
          <Columns>
              <asp:BoundField DataField="IDENTIFIER" HeaderText="IDENTIFIER" ReadOnly="True"
                  SortExpression="IDENTIFIER" />
              <asp:BoundField DataField="FORENAME" HeaderText="FORENAME"
                  SortExpression="FORENAME" />
              <asp:BoundField DataField="SURNAME" HeaderText="SURNAME"
                  SortExpression="SURNAME" />
              <asp:BoundField DataField="DESCRIPTION" HeaderText="DESCRIPTION"
                  SortExpression="DESCRIPTION" />
              <asp:BoundField DataField="RATING" HeaderText="RATING"
                  SortExpression="RATING" />
          </Columns>
      </asp:GridView>
      </div>
      <asp:SqlDataSource ID="NCRSDB" runat="server"
          ConnectionString="<%$ ConnectionStrings:NCRSDBConnectionString %>" SelectCommand="SELECT IDENTIFIER, FORENAME, SURNAME, DESCRIPTION, RATING
  FROM [AR_20120209_ChaplaincyPatientList]
  order by id desc
  "></asp:SqlDataSource>
      </form>
  </asp:Content>

• • Reply
  

  alankarp

  Contributor

  2042 Points

  345 Posts

  Re: Visible Headers with scrolling - GRIDVIEW

  Dec 06, 2012 12:09 PM|LINK

  Hi,

  Please see links below

  http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-in-ASP.Net.aspx

  http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net.aspx

  http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx

  http://csharpdotnetfreak.blogspot.com/2009/07/scrollable-gridview-fixed-headers-asp.html

  Thanks

  Alankar

  Alankar Patil
  
  Profile
• • Reply
  

  sam233

  Member

  36 Points

  218 Posts

  Re: Visible Headers with scrolling - GRIDVIEW

  Dec 07, 2012 07:42 AM|LINK

  Hi Alankarp,

  I have been through a number of links (even the ones you suggested) but im still having issues?

• • Reply
  

  sarathi125

  Star

  13599 Points

  2691 Posts

  Re: Visible Headers with scrolling - GRIDVIEW

  Dec 07, 2012 07:52 AM|LINK

  Hi,

  Just have a look in the following links, really helped me lot of times....

  Nice example wtih online demo and downloadable code files.

  http://mattberseth.com/blog/2007/09/freezing_gridview_column_heade.html

  http://mattberseth.com/blog/2007/09/freezing_gridview_column_heade_1.html

  Parthasarathi,
  Remember to click Mark as Answer on the post that helps to others.
  
  My Blog :MyAspSnippets
• • Reply
  

  sam233

  Member

  36 Points

  218 Posts

  Re: Visible Headers with scrolling - GRIDVIEW

  Dec 07, 2012 10:46 AM|LINK

  the links provided wont allow me to download nor try out the online version!!!!!

• • Reply
  

  twlikol

  Member

  88 Points

  20 Posts

  Re: Visible Headers with scrolling - GRIDVIEW

  Dec 07, 2012 03:24 PM|LINK

  i wrote jQuery plug-in can do this! maybe you can try.
  
  

  Supported Browsers

  • Internet Explorer 7, 8 (IE 9 Compatibility)
  • Internet Explorer 9 (9.0.8112)
  • Internet Explorer 10 on Windows 7 Preview
  • Google Chrome(23.0.1271.64 m)
  • Mozilla Firefox (16.0.2)
  • Apple Safari (5.1.7)

  looking more in website: http://gridviewscroll.aspcity.idv.tw/

  http://twlikol.blogspot.tw/
  http://gridviewscroll.aspcity.idv.tw/
  • Edited by twlikol on Dec 11, 2012 04:19 AM
  • Marked as answer by Frank Jiang - MSFT on Dec 13, 2012 08:46 AM
• • Reply
  

  Golds

  Member

  42 Points

  28 Posts

  Re: Visible Headers with scrolling - GRIDVIEW

  Dec 08, 2012 05:40 AM|LINK

  Try This

  <table border="1" id="dummyHeader" style="height:10px;overflow:auto;width:300px;">
      <thead>
      <tr>
         <th scope="col" style="width:100px;">Customer ID</th>
         <th scope="col" style="width:100px;">City</th>
         <th scope="col" style="width:100px;">Contry</th>
      </tr>
      </thead>
      </table>
      <div id="container" style="height:200px;overflow:auto;width:315px;">
          <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
              DataSourceID="SqlDataSource1" CssClass="grid" HeaderStyle-CssClass="hdr">
              <Columns>
                  <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" InsertVisible="False"
                      ReadOnly="True" SortExpression="CustomerID" ItemStyle-Width="100px" />
                  <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" ItemStyle-Width="100px" />
                  <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" ItemStyle-Width="100px" />
              </Columns>
          </asp:GridView>
          <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:masterConnectionString %>"
              SelectCommand="SELECT CustomerID, City, Country FROM Demo"></asp:SqlDataSource>
      
      </div>

  CSS

      <style type = "text/css">
      .hdr
      {
      display:none;
      }

  
  
  
  

  • Marked as answer by Frank Jiang - MSFT on Dec 13, 2012 08:47 AM
• • Reply
  

  hans_v

  All-Star

  35986 Points

  6550 Posts

  Re: Visible Headers with scrolling - GRIDVIEW

  Dec 08, 2012 08:36 AM|LINK

  Try the CoolGridView:

  http://ideasparks.codeplex.com/