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">
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/require-jquery.js"></script>
<script>
        
var __jrsConfigs__ = {
   urlContext : "http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv"
};
    
require.config({
    baseUrl: "http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/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",
        "perfect-scrollbar": "common/lib/perfect-scrollbar-0.4.6"
    },
    
    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">
    
<div id="US105" style="width: 500px;height:300px;" class="MyTable"></div>

<div style="margin-top:5px;width: 500px;height:300px">

     
    
    
    <div style="width:100%; margin-top:50px">
        <div>
            <div>
             <label for="row">Row:</label>
             <input type="text" id="row"></input>
            </div>
            <div>
             <label for="row">Height:</label>
            <input type="text" id="height"></input>
            </div>
        </div>
        <div>
            <div>
                <label for="row">Column:</label>
                <input type="text" id="column"></input>        
            </div>
            <div>
                <label for="row">Width:</label>
                <input type="text" id="width"></input>
            </div>
        </div>
        <button...

CSS

#US105{
    background-color: #E6E6FA;
    /*border: 1px solid black;*/
    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;
}

.cell-green {
  background-color: green;  
}

.cell-red {
  background-color: red;  
}

/*    TABLE      */ 
.MyTable {
	margin:0px;
    padding:0px;
}

.MyTable table {
    border-collapse: collapse;
    border-spacing: 0;
	margin:0px;
    padding:0px;
}
.MyTable tr:nth-child(odd){ background-color:#e5e5e5; }
.MyTable tr:nth-child(even)    { background-color:#ffffff; }
.MyTable td {
	vertical-align:middle;
	text-align:left;
	padding:0px;
    margin:0px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
    overflow: hidden;
    border: 1px solid black;
}

/*! 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;filter:alpha(opacity=0);-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...

JavaScript

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

    require([
        "components/table/BaseGrid",
        "components/table/StaticGridDataProvider",
        "components/table/DynamicGridStrategy",
        "components/table/StaticGridStrategy",
        "components/table/FixedHeaderGrid",
    ], function(BaseGrid, StaticGridDataProvider,DynamicGridStrategy,StaticGridStrategy, FixedHeaderGrid) {
        var gridHeaderData = [
         [{label: "A"}, {label: "B"}, {label: "C"}, {label: "D"}, {label: "E"}, {label: "F"}, {label: "G"}, {label: "H"}, {label: "I"}, {label: "J"}, {label: "K"}, {label: "L"}, {label: "M"}, {label: "N"}, {label: "O"}, {label: "P"}, {label: "Q"}, {label: "R"}, {label: "S"}, {label: "T"}, {label: "U"}, {label: "V"}, {label: "W"}, {label: "X"}, {label: "Y"}]
        ];
        
        var gridIndex = 1;
        //Grid data
        var gridData = [
            [{label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}],
            [{label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label: gridIndex++}, {label:...