You must Sign In to post a response.
  • Category: JavaScript

    Fixed header grid is not working when grid is in page load

    we have a custom control grid and they are freezing header row and pager using a javascript functions. Using $document.ready we are calling javascript function to get this behavior to grid.
    THis is perfectly working when grid is binding in a button click.

    If grid is in page load, this is not working. Instead of document.ready I tried to call javascript function from OnInit method of .cs file , but grid is not perfectly working as it is on postback event. How to fix this?
  • #764509
    Can you try to call the method in window.onload

    window.onload = function () {
    // Your Javascript for your freezing heading

    By Nathan
    Direction is important than speed

  • #764512
    With the help of following CSS you can do it,
    <style type="text/css">
    .FixedHeader {
    position: absolute;
    font-weight: bold;
    look at the following gridview header, we have call 'HeaderStyle-CssClass'
    <asp:GridView ID="gvDistricts" runat="server" style="height:400px; overflow:auto"
    HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen"
    AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke">

    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #764522
    You can use following code snippet in page load to Fixed header grid is not working when grid is in page load
     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim dt As New DataTable
    Dim drRow As DataRow
    For i As Integer = 0 To 10
    drRow = dt.NewRow
    drRow(0) = "C1" & i
    drRow(1) = "C2" & i
    Me.gvDemo.DataSource = dt
    End Sub

    Or example for Scrollable Gridview with Fixed Heade
    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
    $('#<%=gvdetails.ClientID %>').Scrollable();

  • #764528

    To fix grid header and scroll the items the best and easiest way is using Jquery.

    Follow below steps;

    Add JQuery Plugins, for this we download from below link use the below link and download the plugins.

    After download JQuery plugins call that plugins using below lines of code

    <script type="text/javascript" src="../Scripts/jquery1.8.2.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery1.9.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {

    function gridviewScroll() {
    width: 1100,
    height: 200

    If you want to more details refer below link

    Give respect to your work, Instead of trying to impress your boss.

    Blog :

Sign In to post your comments