8

How to freeze an Asp.net gridview header? I am trying to do it in different ways, but not able to.

I am using ASP 2.0 and VS 2010.

Can any one help me?

Mohan Rajput
  • 634
  • 9
  • 21
Indra
  • 279
  • 2
  • 3
  • 16
  • The link below shows a way to achieve this [Freeze GridView Columns and Headers in ASP.Net CSS](http://www.vbknowledgebase.com/?Id=91&Desc=Freeze-GridView-Columns-and-Headers-in-ASP.Net-CSS) I am adding 2 mores links for this issue that you can try. For me the 1st that I proposed is working, so most likely you missed something. However, the other 2 solutions are also working so you can try them out. [Gridview with Fixed Header](http://www.codeproject.com/Articles/250669/Gridview-with-Fixed-Header) and [Freeze ASP.NET GridView Headers by Creating Client-Side Extenders ](http://weblogs.asp.net/d – Aristotelis Kostopoulos Mar 10 '12 at 19:08
  • Thanks Aristotelis. But i allready tried this not working for me.Is there any way to freeze header programatically. – Indra Mar 11 '12 at 03:57
  • I tried something similar... http://stackoverflow.com/questions/28351955/how-to-match-the-column-width-from-a-table-and-a-asp-net-generated-gridview-tabl but the width doesn't match up – SearchForKnowledge Feb 05 '15 at 21:08
  • @AristotelisKostopoulos I am facing some problem with freezing header. Please check the question http://stackoverflow.com/questions/25178417/set-header-width-and-column-properly-during-freeze-the-header-in-gridview – IT researcher Aug 13 '14 at 07:24
  • @Indra: I added 2 more links in my post. You can try them also out, but as I said above, the first one worked for me, so maybe there is something that you missed. The other 2 links provide solutions that are also work. I hope that you will get to the bottom of this. – Aristotelis Kostopoulos Mar 11 '12 at 07:00

2 Answers2

0

i use jquery floatThead

http://mkoryak.github.io/floatThead/#intro

i had to use a bit of jquery to convert to first row to a thead for it to work.

example below:

$(document).ready(function () {
    var $theadCols = $("#ContentPlaceHolder1_grdCashflow  tr:first-child"),
        $table = $("#ContentPlaceHolder1_grdCashflow");

    // create thead and append <th> columns
    $table.prepend("<thead/>");
    $table.find("thead").append($theadCols);

    // init stickyHeader
    $table.floatThead();

    //$table = $("#ContentPlaceHolder1_grdCashflow");
    $table.dataTable(
    {
        "paging": false,
        "ordering": false,
        "dom":'<"top"fi>rt<"bottom"><"clear">'
    }
    );
});
user1643799
  • 76
  • 5
0

If you are ok with Jquery you can try Datatables Jquery plugin

https://datatables.net/extensions/responsive/examples/column-control/fixedHeader.html

After binding the gridview data [c#]

gridviewid.UseAccessibleHeader = true;
gridviewid.HeaderRow.TableSection = TableRowSection.TableHeader;

for jquery

<script>
 function pageLoad(sender, args) {
            //Your jquery code 
            $(document).ready(function () { 
                tableGrid();
            });

            function tableGrid() { 
                $("#<%=gridviewID.ClientID%>").dataTable().fnDestroy(); 
                $("#<%=gridviewID.ClientID%>").dataTable({
                    "sPaginationType": "full_numbers",
                    "columnDefs": [{
                        "orderable": false
                    }],
                    "aaSorting": [],
                    info: false,
                    paging: true,
                    "oLanguage": { "sSearch": "Search: " },
                    mark: true,
                    dom: 'Blfrtip',
                    buttons: [], fixedHeader: true
                });
            }
        }
    </script>

Note : whenever you rebind you data call the javascript funciton from c# code

ScriptManager.RegisterStartupScript(this, this.GetType(), "callheader", "tableGrid();", true);
Sund'er
  • 666
  • 1
  • 4
  • 11