Click here to Skip to main content
15,923,142 members
Please Sign up or sign in to vote.
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
Updated 12-Oct-11 3:40am
v2

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>
 
Share this answer
 
Comments
Kailashchandra Polai 10-Sep-19 8:36am    
how to do column sorting?
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")="" %&gt;"="">


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


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


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

<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")="" %&gt;"="">

<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")="" %&gt;"="">

<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")="" %&gt;"="">

<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;}
 
Share this answer
 
<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> 
 
Share this answer
 
v3

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900