Gridmvc freeze header jquery

See more:

jQuery

MVC5

I'm looking for some help with GridMVC header freeze.

I have tried a 3 plugins (http://www.jqueryscript.net/table/jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll.html) of JavaScript options but not able to freeze the header on page scroll.

http://gridmvc.azurewebsites.net/

The nearest I could get is on applying JQuery plugin I got 2 headers :( when I scrolled on the same grid.

Code code so far

What I have tried:

<meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1" />
<script src="/Scripts/jquery-3.1.0.min.js"></script>
<link href="/Content/Gridmvc.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.min.js"></script>
<script src="/Scripts/gridmvc.min.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/gridmvc.customwidgets.js" type="text/javascript"> </script>
<script src="/Scripts/jquery.freezeheader.js" type="text/javascript"></script>

<script>
    jQuery(document).ready(function ($) {
        $(".table").freezeHeader({ 'height': '1200px; Width: 1900px' });
    });
</script>

<div id="divVendor" >

    


    <div class="grid-mvc" data-lang="en" data-gridname="VendorGrid" data-selectable="true" data-multiplefilters="true">
        <div class="grid-wrap">
            <table class="table table-striped grid-table" >
                
                <thead>
                        <tr>
<th class="grid-header permHide-mode"><div class="grid-filter" data-filterdata="[]" data-name="RowId" data-type="System.Int32" data-widgetdata="null">
<span class="grid-filter-btn" title="Filter this column"></span></div><div class="grid-header-title">
<a href="?grid-column=RowId&grid-dir=0">RowId</a></div></th><th class="grid-header"> ... Other Columns

                </thead>
                <tbody>
                                <tr class="grid-row " >
<td class="grid-cell permHide-mode" data-name="RowId">219</td>... Other data elements