Import the ‘GridViewScroll.js’ script into the html file.
Add the ‘GridViewScrollHeader’ class to the desk header which must be frozen on scroll.
<tr class="GridViewScrollHeader"> <th>StandardCost<br/>123</th> <th>ListPrice</th> <th>SafetyStockLevel</th> <th>SellStartDate</th> <th>SellEndDate</th> <th>ModifiedDate</th> <th>ProductID</th> <th>Identify</th> <th>Quantity</th> <th>ReorderPoint</th> <th>Weight</th> </tr>
Add the ‘GridViewScrollItem’ to the desk rows.
<tr class="GridViewScrollItem"> <td>747</td> <td>HL Mountain Body - Black, 38</td> <td>FR-M94B-38</td> <td>375</td> <td>2.68</td> <td>739.0410</td> <td>1349.6000</td> <td>500</td> <td>7/1/2001 12:00:00 AM</td> <td> </td> <td>three/11/2004 10:01:36 AM</td> </tr> ...
Config the GridViewScroll.js.
var choices = new GridViewScrollOptions(); choices.elementID = "myTable"; choices.width = 450; choices.top = 300; choices.freezeColumn = true; choices.freezeFooter = true; choices.freezeColumnCssClass = "GridViewScrollItemFreeze"; choices.freezeFooterCssClass = "GridViewScrollFooterFreeze"; choices.freezeColumnCount = 2;
Connect the GridViewScroll to the html desk. Completed.