GRID DOC. Example 1.2: BaseGrid with DynamicStrategy

by obobruyko

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://192.168.1.63:8080/jrs_amber_adv/scripts/components/table/css/table.css">
    
<link rel="stylesheet" type="text/css" href="http://192.168.1.63:8080/jrs_amber_adv/themes/reset.css"> 
    
<link rel="stylesheet" type="text/css" href="http://192.168.1.63:8080/jrs_amber_adv/themes/default/containers.css"> 
    
<link rel="stylesheet" type="text/css" href="http://192.168.1.63:8080/jrs_amber_adv/themes/default/theme.css">
    
<script src="http://192.168.1.63:8080/jrs_amber_adv/scripts/lib/require-2.1.10.js"></script>
         
<script src="http://192.168.1.63:8080/jrs_amber_adv/scripts/require.config.js"></script>

<script>        
var __jrsConfigs__ = {
   contextPath : "http://192.168.1.63:8080/jrs_amber_adv",
    userLocale: "en",
    isXdm: true
};
    
require.config({
    baseUrl: __jrsConfigs__.contextPath + "/scripts",
});
</script>

           
    <div id="US104" style="width: 500px; height: 300px;" class="MyTable"></div>      
        
            <button style="margin-top: 30px" id="staticStrategy">static Strategy</button>
        <button style="margin-top: 30px" id="DynamicGridStrategy">DynamicGrid Strategy</button>
        
<div class="context-menu" >
    <div style="text-align:center;width:100%" id="title"></div>
    <hr/>
    <ul>
        <li><p>Munu Item 1</p></li>
        <li><p>Munu Item 2</p></li>
        <li><p>Munu Item 3</p></li>
        <li><p>Munu Item 4</p></li>
    </ul>
</div>
        
     <div>
        <label>Resize grid:</label><br/>
        <label>Height</label>
        <input type="text" id="gridHeight"></input>
        <label>Width</label>
        <input type="text" id="gridWidth"></input>
        <button id="resizeGrid">Resize grid</button>
    </div>

CSS

#US104{
    margin:0px;
    padding:0px;
    background-color: #E6E6FA;
    overflow: hidden;
    /*width: 300px;
    height: 300px;*/
}

.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...

JavaScript

require([
        "components/table/base/BaseGrid",
        "components/table/FixedHeaderGrid",
        "components/table/base/StaticGridDataProvider",
        "components/table/base/DynamicStrategy",
        "components/table/base/StaticStrategy"
    ], function(BaseGrid, FixedHeaderGrid, StaticGridDataProvider,DynamicStrategy,StaticStrategy) {

        //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 = 5;
        var height = 5;
               
        var baseGrid = new BaseGrid({
            el: "#US104",
            Strategy: { 
                rows: DynamicStrategy,
                cols: DynamicStrategy 
            },
       ...