Scrollable GridView with fixed headers in asp.net

Question

5.00/5 (1 vote)

See more:

hi ,
how to create scrollable Grid View with fixed headers which don't get scrolled with records and stay on the top in asp.net

i written script but its not working plz help me

in Html sourse page

HTML

<style type="text/css">
  .header
  {
    font-weight:bold;
    position:absolute;
    background-color:White;
  }
  </style>

<div>
<gridview>
</gridview>

<HeaderStyle CssClass="header"Height="20px" />
<div /></div>

Thanks in advance

Posted 12-Oct-11 3:35am

pradeep manne

Updated 12-Oct-11 3:40am

P.Salini

v2

Add a Solution

4 solutions

Solution 1

check this

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

http://www.mindfiresolutions.com/A-Scrollable-GridView-with-a-Fixed-Header-in-NET-336.php[^]

Posted 12-Oct-11 3:38am

P.Salini

Updated 12-Oct-11 3:39am

v2

Solution 2

hi,

In grid set -- ShowHeader="False"
on top of grid use a table with columns

Ex:

XML

<tr>
                                <TD >
                                <TABLE id=TABLE9 align="left" style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px;
                                    WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px; background-color:Black; color:White; "
                                    cellSpacing=0 border=1>
                                    <tr>
                                        <td align="left" Width="250px"><b>Category</b></td>
                                        <td align="left" Width="200px"><b>Feature</b></td>
                                        <td align="left" Width="50px" ><b>ADM</b></td>
                                        <td align="left" Width="50px" ><b>PCO</b></td>
                                        <td align="left" Width="50px" ><b>PSV</b></td>
                                        <td align="left" Width="50px" ><b>HOD</b></td>
                                        <td align="left" Width="50px" ><b>EMP</b></td>
                                        <td align="left" Width="50px" ><b>HR</b></td>
                                        <td align="left" Width="50px" ><b>A/c</b></td>
                                        <%--<td align="left" Width="60px" ><b>Status</b></td> --%>
                                        <td align="left" Width="20px" ><b></b></td>
                                    </tr>
                                </table>
                                </td>
                            </tr>
                            <tr>
                            <td align="left">
                            <asp:DataGrid ID="dgPOTLinks" runat="server" AutoGenerateColumns="False"
                                 ShowHeader="false" GridLines="None" BorderStyle="none"
                                 CssClass="mGrid" PagerStyle-CssClass="pgr"   AlternatingRowStyle-CssClass="alt"
                                 OnCancelCommand="OnCancel" Width="100%"
                                 OnItemCreated="dgPOTLinks_ItemCreated"
                                 OnDeleteCommand="OnDelete">
                                 <Columns>
                                          <asp:BoundColumn DataField="ID" HeaderText="ID" Visible="false"></asp:BoundColumn>
                                          <asp:BoundColumn DataField="Category" HeaderText="Category"  ItemStyle-Width="250px" ></asp:BoundColumn>
                                          <asp:BoundColumn DataField="Name" HeaderText="Feature"  ItemStyle-Width="200px" ></asp:BoundColumn>
                                          <asp:BoundColumn DataField="Description" HeaderText="Description"  Visible="false"></asp:BoundColumn>
                                          <asp:BoundColumn DataField="Link" HeaderText="Link" Visible="false"></asp:BoundColumn>
                                          <asp:BoundColumn DataField="Active" HeaderText="Active" Visible="false" ></asp:BoundColumn>
                                          <asp:BoundColumn DataField="CreatedOn" HeaderText="CreatedOn" DataFormatString="{0:MM/dd/yyyy}" ItemStyle-Width="70px" Visible="false"></asp:BoundColumn>
                                          <asp:BoundColumn DataField="CreatedName" HeaderText="CreatedName" ItemStyle-Width="125px"  Visible="false"></asp:BoundColumn>


                                          <asp:TemplateColumn HeaderText="Admin">
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkAdm" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkAdm_CheckedChanged"/>
                                                </ItemTemplate>
                                                <ItemStyle Width="50px" />
                                          </asp:TemplateColumn>
                                          <asp:TemplateColumn HeaderText="PCO">
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkPCO" runat="server" CausesValidation="false" CssClass="txt"  AutoPostBack="true" Width="20px" oncheckedchanged="chkPCO_CheckedChanged"/>
                                                </ItemTemplate>
                                                <ItemStyle Width="50px"/>
                                          </asp:TemplateColumn>
                                          <asp:TemplateColumn HeaderText="PSV">
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkPSV" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkPSV_CheckedChanged"/>
                                                </ItemTemplate>
                                                <ItemStyle Width="50px"/>
                                          </asp:TemplateColumn>
                                          <asp:TemplateColumn HeaderText="HOD">
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkhod" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkhod_CheckedChanged"/>
                                                </ItemTemplate>
                                                <ItemStyle Width="50px" />
                                          </asp:TemplateColumn>
                                          <asp:TemplateColumn HeaderText="EMP">
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkemp" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkemp_CheckedChanged"/>
                                                </ItemTemplate>
                                                <ItemStyle Width="50px" />
                                          </asp:TemplateColumn>
                                          <asp:TemplateColumn HeaderText="HR">
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkHR" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkHR_CheckedChanged"/>
                                                </ItemTemplate>
                                                <ItemStyle Width="50px" />
                                          </asp:TemplateColumn>
                                          <asp:TemplateColumn HeaderText="A/c">
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkAcc" runat="server" CausesValidation="false" CssClass="txt" AutoPostBack="true" Width="20px" oncheckedchanged="chkAcc_CheckedChanged"/>
                                                </ItemTemplate>
                                                <ItemStyle Width="50px" />
                                          </asp:TemplateColumn>

                                          <asp:BoundColumn DataField="Status" HeaderText="Status" ItemStyle-Width="60px" Visible="false"></asp:BoundColumn>
                                          <asp:TemplateColumn>
                                                <ItemTemplate>
                                                    <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/images/action_delete.png" ToolTip="Delete" CommandName="Delete"  />
                                                </ItemTemplate>
                                                <ItemStyle Width="20px" />
                                          </asp:TemplateColumn>
                                          <asp:BoundColumn DataField="CatID" HeaderText="CatID" Visible="false" ></asp:BoundColumn>
                                        </Columns>
                                         <ItemStyle  />
                                    </asp:DataGrid>

                                    <asp:Label ID="lblNoData" runat="server" CssClass="smallLabelError" ForeColor="DarkGreen" Text="No Data Available" Visible="false"></asp:Label>

                            </td>
                            </tr>

Posted 12-Oct-11 3:42am

kishorekke

Comments

Kailashchandra Polai 10-Sep-19 8:36am

how to do column sorting?

Solution 4

Grid View :-

<asp:table id="tblOutputGridHeader" runat="server" cellpadding="0" width="1100px" xmlns:asp="#unknown">
CellSpacing="0" class="table">

<asp:gridview id="gdDPS" cellpadding="0" cssclass="alternetGridWhite table" runat="server" xmlns:asp="#unknown">
Width="1100px" AllowPaging="False" AutoGenerateColumns="false" ShowFooter="false"
ShowHeader="false" GridLines="Both" OnPageIndexChanging="gdDPS_PageIndexChanging"
OnRowDataBound="gdDPS_RowDataBound" OnRowCommand="gdDPS_RowCommand">
<pagersettings position="TopAndBottom">
<footerstyle cssclass="gridfooterblue">
<rowstyle cssclass="odd">
<alternatingrowstyle cssclass="even">
<columns> <asp:templatefield headertext="SNo" itemstyle-width="5%">
<itemtemplate>
<%# (Container.DataItemIndex+1).ToString() %>

<asp:templatefield headertext="DPS Date" itemstyle-width="9%">
<itemtemplate>
<asp:literal id="lbldispach_date" runat="server" text="<%# Eval(" dispach_date")="" %>"="">

<asp:templatefield headertext="DPS No" itemstyle-width="15%">
<itemtemplate>
<asp:hyperlink id="hldispatch_sheetNo" target="_blank" runat="server" text="<%# Eval(" dispatch_sheetno")="" %>"="">

<asp:templatefield headertext="Transporter" itemstyle-width="12%">
<itemtemplate>
<asp:literal id="lbltransporterName" runat="server" text="<%# Eval(" transportername")="" %>"="">

<asp:templatefield headertext="Total PT No" itemstyle-width="6%">
<itemtemplate>
<asp:literal id="lblTotPtno" runat="server" text="<%# Eval(" totalptno")="" %>"="">

<footertemplate>

<asp:label runat="server" text="" id="lblTot_TotPtno">

<asp:templatefield headertext="Weight" itemstyle-width="6%">
<itemtemplate>
<asp:literal id="lblTotalWeight" runat="server" text="<%# Eval(" totalweight")="" %>"="">

<footertemplate>

<asp:label runat="server" text="" id="lblTot_Weight">

<asp:templatefield headertext="Total Cartons" itemstyle-width="6%">
<itemtemplate>
<asp:literal id="lblTotalcartons" runat="server" text="<%# Eval(" totalnoofcartons")="" %>"="">

<footertemplate>

<asp:label runat="server" text="" id="lblTot_cartons">

<asp:templatefield headertext="Loaded Cartons" itemstyle-width="6%">
<itemtemplate>
<asp:literal id="lblloadedcarton" runat="server" text="<%# Eval(" loadedcarton")="" %>"="">

<footertemplate>

<asp:label runat="server" text="" id="lblTot_loadedcarton">

<asp:templatefield headertext="Status" itemstyle-width="10%">
<itemtemplate>
<asp:literal id="lblStatus" runat="server">

<asp:templatefield headertext="Print" itemstyle-width="10%">
<itemtemplate>
<asp:hyperlink id="hypPrint" runat="server" target="_blank">

<asp:templatefield headertext="Loaded Cartons" itemstyle-width="15%">
<itemtemplate>
<asp:hyperlink id="hypptloadcartons" runat="server" target="_blank">

<pagerstyle horizontalalign="Right">

<asp:table id="tblOutputGridFooter" runat="server" cellpadding="0" width="1100px" xmlns:asp="#unknown">
CellSpacing="0" class="table">

Method for Creating Header and footer:-

private void AddHeader()
{
TableCell td;
TableRow tr = new TableRow();
tr = new TableRow();

tr.CssClass = "tableHeading";

td = new TableCell();
td.Text = "SNo";
td.Width = System.Web.UI.WebControls.Unit.Percentage(5);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Date";
td.Width = System.Web.UI.WebControls.Unit.Percentage(9);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "DPS No";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Transporter";
td.Width = System.Web.UI.WebControls.Unit.Percentage(12);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Total PT No";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Weight";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Total Boxes";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Loaded Boxes";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Status";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Print";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Loaded Boxes";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);

tblOutputGridHeader.Rows.Add(tr);
}

private void AddFooter()
{
TableCell td;
TableRow tr = new TableRow();
tr = new TableRow();

tr.CssClass = "tableFooter";

td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(5);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(9);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "Total";
td.Width = System.Web.UI.WebControls.Unit.Percentage(12);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = Convert.ToString(TotPtno);
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "0";
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = Convert.ToString(Totcartons);
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = Convert.ToString(loadedcarton);
td.Width = System.Web.UI.WebControls.Unit.Percentage(6);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(10);//29
tr.Cells.Add(td);

td = new TableCell();
td.Text = "";
td.Width = System.Web.UI.WebControls.Unit.Percentage(15);//29
tr.Cells.Add(td);

tblOutputGridFooter.Rows.Add(tr);
}

When Bind Grid

AddHeader(); //Create header
gdDPS.DataSource = dsDPS; // BVind Data with gridview
gdDPS.DataBind();
AddFooter(); // Create footer

Css :-

.width300{ width:300px; float:left;}
.alternetGrid{background-color:#ccccff}
.alternetGridWhite{background-color:#fff}
.alternetGridWhite td{padding:5px;}

.footerTable{position:absolute; bottom:0; left:0;}

.xScroll{width:980px; overflow-x:scroll; overflow-y:hidden;}
.headingTable{padding:0 17px 0 0;}
.bodyTable{height:200px; overflow-y:scroll; overflow-x:hidden;}
.bodyTableBig{height:200px; overflow-y:scroll; overflow-x:hidden;}

.tableFooter{padding:0 0px 0 0;}
table tr.tableHeading td{color:#0B6FA9; font-weight:bold; padding:7px 10px; background:#d3d3d3 url(../images/table-heading.gif) repeat-x 0 0;}

table tr.tableFooter td{color:#0B6FA9; font-weight:bold; padding:7px 10px; background:#d3d3d3 url(../images/table-heading.gif) repeat-x 0 0;}

Posted 24-Sep-12 21:33pm

Pramod Joshi

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

pradeep manne · Accepted Answer · 2011-10-12T06:12:00

<asp:panel xmlns:asp="#unknown">
runat="server"
ScrollBars="vertical"
Width="500px">

            <asp:gridview>
ID="GridView1″
runat="server">

            

        

Add the css to the Panel
 <style type="text/css">
  .header
  {
   overflow: vertical;
    

    
  }
  table th
{
 position: relative;
 background-color: aqua;


}
  </style>