GridViewScroll with jQuery

Freeze column and fixed header in Table or GridView

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        gridviewScroll();

    });



    function gridviewScroll() {

        $('#gvMain').gridviewScroll({

            width: 700,

            height: 330,

            freezesize: 2,

            arrowsize: 30,

            varrowtopimg: "Images/arrowvt.png",

            varrowbottomimg: "Images/arrowvb.png",

            harrowleftimg: "Images/arrowhl.png",

            harrowrightimg: "Images/arrowhr.png",

            headerrowcount: 2

        });

    }

</script>

<table cellspacing="0" id="gvMain" style="width: 100%; border-collapse: collapse;">

    <tr class="GridviewScrollC1Header">

        <td colspan="3" style="background-color:#666666;">Product</td>

        <td colspan="2" style="background-color:#666666;">Package</td>

        <th rowspan="2" scope="col">StandardCost</th>

        <th rowspan="2" scope="col">ListPrice</th>

        <th rowspan="2" scope="col">SafetyStockLevel</th>

        <th rowspan="2" scope="col">SellStartDate</th>

    </tr>

    <tr class="GridviewScrollC1Header">

        <th scope="col">ProductID</th>

        <th scope="col">Name</th>

        <th scope="col">Number</th>

        <th scope="col">ReorderPoint</th>

        <th scope="col">Weight</th>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">747</td>

        <td style="background-color: #DDDDDD;">HL Mountain Frame - Black, 38</td>

        <td>FR-M94B-38</td>

        <td>500</td>

        <td>375</td>

        <td>739.0410</td>

        <td>1349.6000</td>

        <td>2.68</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">748</td>

        <td style="background-color: #DDDDDD;">HL Mountain Frame - Silver, 38</td>

        <td>FR-M94S-38</td>

        <td>500</td>

        <td>375</td>

        <td>747.2002</td>

        <td>1364.5000</td>

        <td>2.68</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">749</td>

        <td style="background-color: #DDDDDD;">Road-150 Red, 62</td>

        <td>BK-R93R-62</td>

        <td>100</td>

        <td>75</td>

        <td>2171.2942</td>

        <td>3578.2700</td>

        <td>15.00</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">750</td>

        <td style="background-color: #DDDDDD;">Road-150 Red, 44</td>

        <td>BK-R93R-44</td>

        <td>100</td>

        <td>75</td>

        <td>2171.2942</td>

        <td>3578.2700</td>

        <td>13.77</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">751</td>

        <td style="background-color: #DDDDDD;">Road-150 Red, 48</td>

        <td>BK-R93R-48</td>

        <td>100</td>

        <td>75</td>

        <td>2171.2942</td>

        <td>3578.2700</td>

        <td>14.13</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">752</td>

        <td style="background-color: #DDDDDD;">Road-150 Red, 52</td>

        <td>BK-R93R-52</td>

        <td>100</td>

        <td>75</td>

        <td>2171.2942</td>

        <td>3578.2700</td>

        <td>14.42</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">753</td>

        <td style="background-color: #DDDDDD;">Road-150 Red, 56</td>

        <td>BK-R93R-56</td>

        <td>100</td>

        <td>75</td>

        <td>2171.2942</td>

        <td>3578.2700</td>

        <td>14.68</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">754</td>

        <td style="background-color: #DDDDDD;">Road-450 Red, 58</td>

        <td>BK-R68R-58</td>

        <td>100</td>

        <td>75</td>

        <td>884.7083</td>

        <td>1457.9900</td>

        <td>17.79</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">755</td>

        <td style="background-color: #DDDDDD;">Road-450 Red, 60</td>

        <td>BK-R68R-60</td>

        <td>100</td>

        <td>75</td>

        <td>884.7083</td>

        <td>1457.9900</td>

        <td>17.90</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">756</td>

        <td style="background-color: #DDDDDD;">Road-450 Red, 44</td>

        <td>BK-R68R-44</td>

        <td>100</td>

        <td>75</td>

        <td>884.7083</td>

        <td>1457.9900</td>

        <td>16.77</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">757</td>

        <td style="background-color: #DDDDDD;">Road-450 Red, 48</td>

        <td>BK-R68R-48</td>

        <td>100</td>

        <td>75</td>

        <td>884.7083</td>

        <td>1457.9900</td>

        <td>17.13</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">758</td>

        <td style="background-color: #DDDDDD;">Road-450 Red, 52</td>

        <td>BK-R68R-52</td>

        <td>100</td>

        <td>75</td>

        <td>884.7083</td>

        <td>1457.9900</td>

        <td>17.42</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">759</td>

        <td style="background-color: #DDDDDD;">Road-650 Red, 58</td>

        <td>BK-R50R-58</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>19.79</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">760</td>

        <td style="background-color: #DDDDDD;">Road-650 Red, 60</td>

        <td>BK-R50R-60</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>19.90</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">761</td>

        <td style="background-color: #DDDDDD;">Road-650 Red, 62</td>

        <td>BK-R50R-62</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>20.00</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">762</td>

        <td style="background-color: #DDDDDD;">Road-650 Red, 44</td>

        <td>BK-R50R-44</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>18.77</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">763</td>

        <td style="background-color: #DDDDDD;">Road-650 Red, 48</td>

        <td>BK-R50R-48</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>19.13</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">764</td>

        <td style="background-color: #DDDDDD;">Road-650 Red, 52</td>

        <td>BK-R50R-52</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>19.42</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">765</td>

        <td style="background-color: #DDDDDD;">Road-650 Black, 58</td>

        <td>BK-R50B-58</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>19.79</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">766</td>

        <td style="background-color: #DDDDDD;">Road-650 Black, 60</td>

        <td>BK-R50B-60</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>19.90</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">767</td>

        <td style="background-color: #DDDDDD;">Road-650 Black, 62</td>

        <td>BK-R50B-62</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>20.00</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">768</td>

        <td style="background-color: #DDDDDD;">Road-650 Black, 44</td>

        <td>BK-R50B-44</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>18.77</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">769</td>

        <td style="background-color: #DDDDDD;">Road-650 Black, 48</td>

        <td>BK-R50B-48</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>19.13</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">770</td>

        <td style="background-color: #DDDDDD;">Road-650 Black, 52</td>

        <td>BK-R50B-52</td>

        <td>100</td>

        <td>75</td>

        <td>486.7066</td>

        <td>782.9900</td>

        <td>19.42</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">771</td>

        <td style="background-color: #DDDDDD;">Mountain-100 Silver, 38</td>

        <td>BK-M82S-38</td>

        <td>100</td>

        <td>75</td>

        <td>1912.1544</td>

        <td>3399.9900</td>

        <td>20.35</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">772</td>

        <td style="background-color: #DDDDDD;">Mountain-100 Silver, 42</td>

        <td>BK-M82S-42</td>

        <td>100</td>

        <td>75</td>

        <td>1912.1544</td>

        <td>3399.9900</td>

        <td>20.77</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">773</td>

        <td style="background-color: #DDDDDD;">Mountain-100 Silver, 44</td>

        <td>BK-M82S-44</td>

        <td>100</td>

        <td>75</td>

        <td>1912.1544</td>

        <td>3399.9900</td>

        <td>21.13</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">774</td>

        <td style="background-color: #DDDDDD;">Mountain-100 Silver, 48</td>

        <td>BK-M82S-48</td>

        <td>100</td>

        <td>75</td>

        <td>1912.1544</td>

        <td>3399.9900</td>

        <td>21.42</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">775</td>

        <td style="background-color: #DDDDDD;">Mountain-100 Black, 38</td>

        <td>BK-M82B-38</td>

        <td>100</td>

        <td>75</td>

        <td>1898.0944</td>

        <td>3374.9900</td>

        <td>20.35</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

    <tr class="GridviewScrollC1Item">

        <td style="background-color: #DDDDDD;">776</td>

        <td style="background-color: #DDDDDD;">Mountain-100 Black, 42</td>

        <td>BK-M82B-42</td>

        <td>100</td>

        <td>75</td>

        <td>1898.0944</td>

        <td>3374.9900</td>

        <td>20.77</td>

        <td>7/1/2005 12:00:00 AM</td>

    </tr>

</table>

ProductID	Name	Number	ReorderPoint	Weight	StandardCost	ListPrice	SafetyStockLevel	SellStartDate	SellEndDate	ModifiedDate
Product			Package		StandardCost	ListPrice	SafetyStockLevel	SellStartDate	SellEndDate	ModifiedDate
747	HL Mountain Frame - Black, 38	FR-M94B-38	375	2.68	739.0410	1349.6000	500	7/1/2001 12:00:00 AM		3/11/2004 10:01:36 AM
748	HL Mountain Frame - Silver, 38	FR-M94S-38	375	2.68	747.2002	1364.5000	500	7/1/2001 12:00:00 AM		3/11/2004 10:01:36 AM
749	Road-150 Red, 62	BK-R93R-62	75	15.00	2171.2942	3578.2700	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
750	Road-150 Red, 44	BK-R93R-44	75	13.77	2171.2942	3578.2700	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
751	Road-150 Red, 48	BK-R93R-48	75	14.13	2171.2942	3578.2700	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
752	Road-150 Red, 52	BK-R93R-52	75	14.42	2171.2942	3578.2700	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
753	Road-150 Red, 56	BK-R93R-56	75	14.68	2171.2942	3578.2700	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
754	Road-450 Red, 58	BK-R68R-58	75	17.79	884.7083	1457.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
755	Road-450 Red, 60	BK-R68R-60	75	17.90	884.7083	1457.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
756	Road-450 Red, 44	BK-R68R-44	75	16.77	884.7083	1457.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
757	Road-450 Red, 48	BK-R68R-48	75	17.13	884.7083	1457.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
758	Road-450 Red, 52	BK-R68R-52	75	17.42	884.7083	1457.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
759	Road-650 Red, 58	BK-R50R-58	75	19.79	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
760	Road-650 Red, 60	BK-R50R-60	75	19.90	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
761	Road-650 Red, 62	BK-R50R-62	75	20.00	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
762	Road-650 Red, 44	BK-R50R-44	75	18.77	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
763	Road-650 Red, 48	BK-R50R-48	75	19.13	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
764	Road-650 Red, 52	BK-R50R-52	75	19.42	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
765	Road-650 Black, 58	BK-R50B-58	75	19.79	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
766	Road-650 Black, 60	BK-R50B-60	75	19.90	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
767	Road-650 Black, 62	BK-R50B-62	75	20.00	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
768	Road-650 Black, 44	BK-R50B-44	75	18.77	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
769	Road-650 Black, 48	BK-R50B-48	75	19.13	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
770	Road-650 Black, 52	BK-R50B-52	75	19.42	486.7066	782.9900	100	7/1/2001 12:00:00 AM	6/30/2003 12:00:00 AM	3/11/2004 10:01:36 AM
771	Mountain-100 Silver, 38	BK-M82S-38	75	20.35	1912.1544	3399.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
772	Mountain-100 Silver, 42	BK-M82S-42	75	20.77	1912.1544	3399.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
773	Mountain-100 Silver, 44	BK-M82S-44	75	21.13	1912.1544	3399.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
774	Mountain-100 Silver, 48	BK-M82S-48	75	21.42	1912.1544	3399.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
775	Mountain-100 Black, 38	BK-M82B-38	75	20.35	1898.0944	3374.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM
776	Mountain-100 Black, 42	BK-M82B-42	75	20.77	1898.0944	3374.9900	100	7/1/2001 12:00:00 AM	6/30/2002 12:00:00 AM	3/11/2004 10:01:36 AM