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;
    }
    </style>
    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">

    Thanks
    Koolprasd2003
    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
    dt.Columns.Add("C1")
    dt.Columns.Add("C2")
    Dim drRow As DataRow
    For i As Integer = 0 To 10
    drRow = dt.NewRow
    drRow(0) = "C1" & i
    drRow(1) = "C2" & i
    dt.Rows.Add(drRow)
    Next
    Me.gvDemo.DataSource = dt
    Me.gvDemo.DataBind()
    End Sub

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

  • #764528
    Hi,

    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.

    http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

    http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js

    http://gridviewscroll.aspcity.idv.tw/


    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 () {
    gridviewScroll();
    });

    function gridviewScroll() {
    $('#<%=gridview1.ClientID%>').gridviewScroll({
    width: 1100,
    height: 200
    });
    }
    </script>


    If you want to more details refer below link http://www.dotnetspider.com/resources/45021-Scrollable-GridView-using-JQuery.aspx

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

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/


  • Sign In to post your comments