Grid view fixed header

Question

I need to fix header of the grid view. I tried jscript file ,

        <div class="Container"  style="width: 816px; height: 319px;">
                                                        <asp:GridView 
                                                        ID="GrdViewMyTasks" runat="server" AllowSorting="True" 
                                                        AutoGenerateColumns="False" BackColor="White" BorderColor="#0061C1" 
                                                        BorderStyle="None" CaptionAlign="Bottom" EmptyDataText="No Records Found" 
                                                        Font-Names="Verdana" Font-Size="X-Small" ForeColor="#0061C1"  
                                                        OnRowDataBound="GrdViewMyTasks_RowDataBound" width="99%" Height="247px"
                                                        onselectedindexchanged="GrdViewMyTasks_SelectedIndexChanged" ShowFooter="True" 
                                                        ShowHeaderWhenEmpty="True" >
                                                        <Columns>
                                                        <asp:BoundField DataField="TaskID" HeaderText="SL No" >
                                                                <FooterStyle BackColor="#0061C1" />
                                                                <HeaderStyle BackColor="#0061C1" HorizontalAlign="Center" 
                                                                VerticalAlign="Middle"  />
                                                              <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                             </asp:BoundField>
                                                             <asp:TemplateField HeaderText="Task Name">
                                                             <ItemTemplate>
                                                                <asp:Label ID="TaskName" runat="server" 
                                                                    Font-Names="Verdana" Font-Size="X-Small" Height="24px" 
                                                                    Text='<%# Eval("TaskName")%>' Width="70px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"   />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Due Date">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="DueDate" runat="server" DataFormatString="{0:dd/MM/yyyy}" 
                                                                    Font-Names="Verdana" Font-Size="X-Small" Height="20px" 
                                                                    Text='<%# Eval("DueDate","{0:dd/MM/yyyy}")%>' Width="70px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"   />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Description">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="Description" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                    Height="20px" Text='<%# Eval("Description")%>' Width="90px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"  />
                                                            <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Assign By">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="AssignBy" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                    Height="20px" Text='<%# Eval("AssignBy")%>' Width="80px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"   />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Status">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="Status" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                    Height="20px" Text='<%# Eval("Status")%>' Width="60px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"  />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="% Complete">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="PercentageComplete" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                    Height="20px" Text='<%# Eval("PercentageComplete")%>' Width="70px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"  />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="View Details">
                                                            <ItemTemplate>
                                                            <asp:HyperLink 
                                                                    ID="ViewDetails" runat="server" DataNavigateUrlFields="TaskID" 
                                                                    DataNavigateUrlFormatString="Reports.aspx?TaskID={0}" Font-Names="Verdana" 
                                                                    Font-Size="X-Small" ForeColor="#0061C1" Height="24px" Width="70px"
                                                                    NavigateUrl="Reports.aspx" Text="ViewDetails" >View</asp:HyperLink>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"   />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                        </Columns>
                                                    </asp:GridView>
                                                    </div>

                  <style type="text/css">

                  .Container
                    {
                        overflow: auto;
                     }
      <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
      <script src="ScrollableGrid.js" type="text/javascript"></script>

       <script type="text/javascript" language="javascript">
          $(document).ready(function () {
           $('#<%=GrdViewMyTasks.ClientID %>').Scrollable();
           }
           )
               </script>

header gets frixed but d grid view width has shortened and header size has been increased.. it dsnt gets fit with d div tag .. i have placed my grid view code and jquery file

score 3 · Accepted Answer · answered Jul 05 '13 at 06:54

3

Just try to js file like

<script type="text/javascript" language="javascript">
$(document).ready(function() 
{
$('#<%=GridViewName.ClientID %>').Scrollable();
}
)
</script>

Check this jQuery Fixed Header Scrollable GridView

You will get ScrollableGrid.js file from Jquery orignal website.

Hope it works for you.

answered Jul 05 '13 at 06:54

Rahul

5,603
6
34
57

1

i tried this too but my header column size increases and my cel size bcums less it scrolls too n header will be fixed bt column size in nt matched wid the header size .. plz share d solution like wat shuld i do – Suraj Jul 05 '13 at 07:00
1

If you are getting alignment problem then try to give `width` to your grid as well. – Rahul Jul 05 '13 at 07:01
2

let us assume if your grid width is `300px` and you have `6 columns` to display then assign each columns width to `60px` so that it cannot be less or more than the grid width.hope it works. – Rahul Jul 05 '13 at 07:08

score 1 · Answer 2 · answered Jul 05 '13 at 07:01

Two problems with your code:

positioning absolute is being applied to the first boundfield which means it will be applied to all cells in the first column! It is also applied to the templatefield's headerstyle and footerstyle but not to the itemtemplate (anyway that is irrelevant)! Also, it picks up top-left as 0-0. So, no wonder your columns coalesce and merge to the leftmost column.
All this makes no sense to the table. You can't be applying positioning on table cells! You can apply positioning to the entire table, but individual cells, nopes.

Two solutions to your problem:

Create your own code to create a scrollable table. You WILL have to create separate header and/or footer tables. You cannot create a scrollable table without splitting thead and/or tfoot.
Go by the libraries people have recommended to you.

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

This may help: http://www.fixedheadertable.com/ - it's more reliable cross browser. Though you may have to persuade ASP.NET to render <th> tags: How do I get Gridview to render THEAD?

edited May 23 '17 at 12:32

Community

1
1

answered Jul 05 '13 at 06:22

Ryan

3,924
6
46
69

2

wat ? dude i requested u... i didnt order u.. i didnt find the link useful so asked for othr solution... its nt my prblm .. – Suraj Jul 05 '13 at 06:29

Grid view fixed header

3 Answers3

Linked