GRID DOC. Example 1: BaseGrid with StaticStrategy

by tara5

HTML

<link rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/adhoc/api/css/adHocView.css" type="text/css" media="screen">
    
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/lib/require-jquery-2.1.2.js"></script>
         
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/require.config.js"></script>

<script>        
var __jrsConfigs__ = {
   urlContext : "http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv",
    isXdm: true
};
    
require.config({
    baseUrl: __jrsConfigs__.urlContext + "/scripts",
});
</script>

<div id="container" style="margin-top:20px;height:500px;width:500px"></div>

CSS

table.jrs-grid {
    border-collapse: collapse;
}

.jrs-grid tr, .jrs-grid td {
    border-collapse: collapse;
    border: 1px solid #e3e9ef;
}

.jrs-grid .gray {
    background-color: gray
}

JavaScript

require([
        "jquery",
        "components/table/base/BaseGrid",
        "components/table/base/StaticGridDataProvider"
    ], function($, BaseGrid, StaticGridDataProvider) {        
        //Create data provider
        var dataProvider = new StaticGridDataProvider(gridData).getData;
             
        //Create instance of grid
        var grid =  new BaseGrid({
            getData: dataProvider,
            colsWidth: 100,
            rowsHeight: 100,
            gridHeight: "100%",
            gridWidth: "100%",            
        });       
        
        //Append grid to the container
        $("#container").append(grid.getEl());

        //Initiate table rendering
        grid.render();
    });
    
       
    //Grid data
    var gridData = [            
        [{label: "21", rowspan: 10},{label: "22", colspan: 14, class:"gray"}, null,null,null,null,null,null,null,null,null,null,null,null,null],
            [null,{label: "32"},{label: "33"},{label: "34"},{label: "35"},{label: "21"},{label: "asdf"},{label: "23"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "42"},{label: "43"},{label: "44"},{label: "45"},{label: "21"},{label: "22"},{label: "asdf"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "52"},{label: "53"},{label: "54"},{label: "55"},{label: "21"},{label: "22"},{label: "23"},{label: "asdf"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "asdf"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
            [null,{label: "32"},{label: "33"},{label: "34"},{label: "35"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "asfd"},{label: "22"},{label: "23"},{label:...