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

    Fixed header custom gridview problem with horizontal scroll


    I have gridview custom control with fixed headers. We are assigning fixed header through javascript. This grid has some issue. Grid is workin good when width of all datarow columns is less than width of div container. Suppose grid has more columns whose total width is greater than width of a div container then problem comes.
    If grid has more columns whose total width is more than div width, then grid should have horizontal scroll and fixed header columns also should scroll along with body during horizontal scroll. But this is not happening. Body container is only scrolling during horizontal scroll header is not at all moving. How can make header to move along with body during horizontal scrolling using javascript ?
  • #764626
    Try wrapping a DIV, see below snippet
    <div style="overflow-x:auto;width:800px"></div> around the GridView
    May be like below sample
    <div id="grdCharges" runat="server" style="width: 875px; overflow: auto; height: 160px;">
    <asp:GridView ID="grd1" runat="server" AutoGenerateColumns="False" Width="150%">

    If you put your gridview in div, and then you can set scroll to div, I have not tried it but check out below link

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

  • #764650

    First keep your gridview inside a div tag like below,

    <div style="OVERFLOW: auto; WIDTH: 800px; HEIGHT: 240px">
    <asp:datagrid id="GridView1" runat="server"....

    <HeaderStyle CssClass="FixedHeader" />

    Then use below CSS to make your header of the gridview fixed,

    <style type="text/css">

    Let me know if you have any doubt on above code.

    Asheej T K
    Microsoft MVP[ASP.NET/IIS]
    DotNetSpider MVM

  • #764664

    The best and simplest way to achieve this task using Jquery, follow simple steps to achieve your goal.

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

    Using above links download JQuery plugins and add that to scripts folder.

    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 still having doubts then refer below article

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

    Blog :

Sign In to post your comments