JRS 105. GRID: User can scroll data but Table header should remain fixed

by obobruyko

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="http://192.168.1.93:8080/JRS-pro/scripts/components/table/css/table.css">
<script src="http://192.168.1.93:8080/JRS-pro/scripts/require-jquery.js"></script>

<script>
var __jrsConfigs__ = {
   urlContext : "http://192.168.1.93:8080/JRS-pro"
};
    
require.config({
    baseUrl: "http://192.168.1.93:8080/JRS-pro/scripts",
    enforceDefine:true,
    paths: {
        "lodash": "common/lib/lodash-1.1.1",
        "underscore" : "config/lodashTemplateSettings",
        "text" : "common/plugin/text",
        "common/request": "common/corsRequest",
        "easyxdm": "common/lib/xdm-1.0.1",
        "jquery.mousewheel": "common/lib/jquery.mousewheel-3.1.9",
        "perfect-scrollbar": "common/lib/perfect-scrollbar-0.4.6",
        "hammer": "common/lib/hammer-1.0.7"
    },
    
    shim: {
        "jrs.configs": {
            exports: "__jrsConfigs__"
        }
    }
});    
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/themes/reset.css">
<link rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/_themes/D7B7DB76/theme.css">
<link rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/_themes/D7B7DB76/pages.css" type="text/css" media="screen,print">
<link rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/_themes/D7B7DB76/containers.css" type="text/css" media="screen,print">
<link rel="stylesheet"...

CSS

#US104{
    margin:0px;
    padding:0px;
    background-color: #E6E6FA;
    overflow: hidden; 
}

.context-menu {
    border: 1px solid black;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    width:100px;
    display:none;
    border-radius: 4px;
    -moz-border-radius:4px; 
    -webkit-border-radius: 4px;     
    z-index:91;
}


/*! perfect-scrollbar - v0.4.6
* http://noraesae.github.com/perfect-scrollbar/
* Copyright (c) 2013 HyeonJe Jun; Licensed MIT */

.ps-container .ps-scrollbar-x-rail{position:absolute;bottom:3px;height:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0.7;filter:alpha(opacity=70);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color.2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-x-rail,.ps-container.hover .ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x-rail:hover,.ps-container .ps-scrollbar-x-rail.hover{/*background-color:#eee;*/opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-x-rail.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y-rail{position:absolute;right:3px;width:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0.7;filter:alpha(opacity=70);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color.2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-y-rail,.ps-container.hover .ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y-rail:hover,.ps-container .ps-scrollbar-y-rail.hover{/*background-color:#eee;*/opacity:.9;filter:alpha(opacity=90)}.ps-container...

JavaScript

//<%-- ***************************************************************** --%>
//<%-- US 105: User can scroll data but Table header should remain fixed --%>
//<%-- ***************************************************************** --%>
    

    require([
        "components/table/BaseGrid",
        "components/table/FixedHeaderGrid",
        "components/table/StaticGridDataProvider",
        "components/table/DynamicGridStrategy",
        "components/table/StaticGridStrategy"
    ], function(BaseGrid, FixedHeaderGrid, StaticGridDataProvider,DynamicGridStrategy,StaticGridStrategy) {

        //Grids data
        var headerGridData = [[{label: "1"}, {label: "2"}, {label: "3"}, {label: "4"}, {label: "5"}, {label: "6"}, {label: "7"}, {label: "8"}]];
        
        var gridData = [[{label: "1", colspan: "8",class:"jrs-grid-group"}, null, null, null, null, null, null, null],
                        [{label: "9"}, {label: "10"}, {label: "11"}, {label: "12"}, {label: "13"}, {label: "14"}, {label: "15"}, {label: "16"}],
                        [{label: "17"}, {label: "18"}, {label: "19"}, {label: "20"}, {label: "21"}, {label: "22"}, {label: "23"}, {label: "24"}],
                        [{label: "25"}, {label: "26"}, {label: "27"}, {label: "28"}, {label: "29"}, {label: "30"}, {label: "31"}, {label: "32"}],
                        [{label: "33"}, {label: "34"}, {label: "35"}, {label: "36"}, {label: "37"}, {label: "38"}, {label: "39"}, {label: "40"}],
                        [{label: "41"}, {label: "42"}, {label: "43"}, {label: "44"}, {label: "45"}, {label: "46"}, {label: "47"}, {label: "48"}]];
                      
        //Create data provider
        var dataProvider = new StaticGridDataProvider(gridData).getData,
            headerDataProvider = new StaticGridDataProvider(headerGridData).getData;
                              
        //create and init table component
        var maxRows;
        var maxColumns;
        var top;
        var left;
        var width =...