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

Hi Waghuldey,

I have created a sample which full fill your requirement and the required js,css need to be downloaded from below link and 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.

https://github.com/twlikol/GridViewScroll

and i have made use of Northwind Database's Orders Table. You can get Northwind Database from below article.

Install the Northwind and Pubs Sample Databases in SQL Server Express

Refer below sample

HTML

<div>        
    <asp:Repeater ID="rptOrders" runat="server">
        <HeaderTemplate>
            <table id="tblOrders" style="width: 100%; border-collapse: collapse;">
                <tr>
                    <th scope="col">
                        OrderID
                    </th>
                    <th scope="col">
                        CustomerID
                    </th>
                    <th scope="col">
                        ShipName
                    </th>
                    <th scope="col">
                        ShipAddress
                    </th>
                    <th scope="col">
                        ShipCity
                    </th>
                    <th scope="col">
                        ShipPostalCode
                    </th>
                    <th scope="col">
                        ShipCountry
                    </th>
                    <th scope="col">
                        Freight
                    </th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <%# Eval("OrderID")%>
                </td>
                <td>
                    <%# Eval("CustomerID")%>
                </td>
                <td>
                    <%# Eval("ShipName")%>
                </td>
                <td>
                    <%# Eval("ShipAddress")%>
                </td>
                <td>
                    <%# Eval("ShipCity")%>
                </td>
                <td>
                    <%# Eval("ShipPostalCode")%>
                </td>
                <td>
                    <%# Eval("ShipCountry")%>
                </td>
                <td>
                    <%# Eval("Freight")%>
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
</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 () {
            $('[id*=tblOrders]').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);                            
                        rptOrders.DataSource = dt;
                        rptOrders.DataBind();
                    }
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
	If Not Me.IsPostBack Then
		Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
		Dim query As String = "SELECT TOP 50 * FROM Orders;"
		Using con As New SqlConnection(constr)
			Using cmd As New SqlCommand(query)
				Using sda As New SqlDataAdapter()
					cmd.Connection = con
					sda.SelectCommand = cmd
					Using dt As New DataTable()
						sda.Fill(dt)
						rptOrders.DataSource = dt
						rptOrders.DataBind()
					End Using
				End Using
			End Using
		End Using
	End If
End Sub

ScreenShot