How to freeze GridView column and row using jQuery in ASP.Net

Last Reply on Jan 13, 2017 02:00 AM By AnandM

Posted on Jan 12, 2017 07:40 AM

Please help me Freeze the 2 first columns when scroll the Horizontal scrollbar GridView

I following this page but no luck:

https://community.dynamics.com/crm/b/crminogic/archive/2009/05/07/freeze-header-and-the-first-column-of-the-gridview-control

Posted on Jan 12, 2017 08:51 AM Modified on on Jan 12, 2017 09:01 AM

Hi jerryhien,

I have created a sample which full fill your requirement and the required js,css need to be downloaded from below link

https://github.com/twlikol/GridViewScroll

Refer below sample

HTML

<div>
    <asp:GridView ID="gvCustomers" runat="server" Style="width: 100%; border-collapse: collapse;">
    </asp:GridView>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link href="GridviewScroll/gridviewScroll.css" rel="stylesheet" type="text/css" />
    <script src="GridviewScroll/gridviewScroll.js" type="text/javascript"></script>
    <script src="GridviewScroll/gridviewScroll.min.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#gvCustomers').gridviewScroll({
                width: 600,
                height: 300,
                freezesize: 2, // Freeze Number of Columns.
                headerrowcount: 1, //Freeze Number of Rows with Header.
                arrowsize: 30,
                varrowtopimg: "Images/arrowvt.png",
                varrowbottomimg: "Images/arrowvb.png",
                harrowleftimg: "Images/arrowhl.png",
                harrowrightimg: "Images/arrowhr.png"
            });
        });
    </script>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT TOP 50 * FROM Orders;";
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataTable dt = new DataTable())
                    {
                        sda.Fill(dt);
                        gvCustomers.DataSource = dt;
                        gvCustomers.DataBind();
                    }
                }
            }
        }
    }
}

ScreenShot