ADV. US 102 - User can scroll data in table via API

by godgav

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://gavmacbook.local:8080/jasperserver-pro-adv/scripts/require-jquery.js"></script>

<script>
var __jrsConfigs__ = {
   urlContext : "http://gavmacbook.local:8080/jasperserver-pro-adv"
};
    
require.config({
    baseUrl: "http://gavmacbook.local:8080/jasperserver-pro-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"
    },
    
    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>



<div style="margin-top:50px;width:100%" >
    
    <table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td width="100%">
			<div id="gridWithGroupsPlaceholder" style="width:100%;height:auto;" class="MyTable"></div>
			<div id="slider"></div>
		</td>
		<td height="100%" valign="top">
			<div id="vslider" ></div>
		</td>
	</tr>
  </table>
    
    
        
</div>

CSS

#slider {
	width:100% !important;
	height:0.3em !important;
	margin-top:5px;
  }	
  #slider a{
	height:0.8em !important;
	width:0.8em !important;
  }

  
  #vslider{
	margin-left:5px;
	width:0.3em !important;
  }
  
  #vslider a{
	height:0.8em !important;
	width:0.8em !important;
  }

#frameFooter {
    display: none;
}



  
.MyTable {
	margin:0px;padding:0px;
	width:100%;
	border:1px solid #000000;
}.MyTable table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	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;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:10px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}

JavaScript

require([
    "components/table/BaseGrid",
    "components/table/StaticGridDataProvider",
    "components/table/DynamicGridStrategy",
    "components/table/StaticGridStrategy"
], function (BaseGrid, StaticGridDataProvider, DynamicGridStrategy, StaticGridStrategy) {
    var baseGrid;
    var colums;
    var cur_columns;
    var rows;
    var cur_rows;
    var gSl;
    var vwidth = 10;
    var vheight = 10;
    var cSl;
    //Grid data
    var gridData = [
        [
            {
                "label": "December 12, 2013 16:30:55:363"
            },
            {
                "label": 411999.37215743866
            },
            {
                "label": true
            },
            {
                "label": "8f01a34b-8586-4cc3-92b4-a580ab26c213"
            },
            {
                "label": "Cell row#1 column#5"
            },
            {
                "label": "Cell row#1 column#6"
            },
            {
                "label": "Cell row#1 column#7"
            },
            {
                "label": "Cell row#1 column#8"
            },
            {
                "label": "Cell row#1 column#9"
            },
            {
                "label": "Cell row#1 column#10"
            },
            {
                "label": "Cell row#1 column#11"
            },
            {
                "label": "Cell row#1 column#12"
            },
            {
                "label": "Cell row#1 column#13"
            },
            {
                "label": "Cell row#1 column#14"
            },
            {
                "label": "Cell row#1 column#15"
            },
            {
                "label": "Cell row#1 column#16"
            },
            {
                "label": "Cell row#1 column#17"
            },
            {
                "label": "Cell row#1 column#18"
            },
            {
                "label": "Cell row#1 column#19"
            },
            {
                "label": "Cell row#1 column#20"
    ...