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

jerryhien
 
on Jan 12, 2017 07:40 AM
Sample_111780.zip
12109 Views

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

Download FREE API for Word, Excel and PDF in ASP.Net: Download
AnandM
 
on Jan 12, 2017 08:51 AM
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

jerryhien
 
on Jan 12, 2017 08:59 PM
AnandM says:
Style="width: 100%; border-collapse: collapse;"

 Thanks you very much for your very detail sample!

That's work exactly as my expect, but the gridviewScroll use the 1.82  jQuery & 1.9.1 jQuery UI,  not working with the jquery 3.1.1 & 1.12.1 jQuery UI in my project. 

Could you help me fix it ?

AnandM
 
on Jan 13, 2017 02:00 AM

Hi jerryhien,

You need to use the 1.82 jQuery & 1.9.1 jQuery UI versions as the JS is based on the mentioned jQuery versions so the JS will be supported if above two versions are used and if you want to use it with latest versions then you need to change the js according to latest versions as it is not possible to do through forum.