GRID DOC. Example 2.3: FixedHeader grid with mixed strategies

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" type="text/css" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/themes/reset.css"> 
    
<link rel="stylesheet" type="text/css" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/themes/default/containers.css"> 
    
<link rel="stylesheet" type="text/css" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/themes/default/theme.css">

<link rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/components/table/css/table.css">
    
<link type="text/css" rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/components/table/css/perfect-scrollbar.css">  
    
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/lib/require-2.1.10.js"></script>
         
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/require.config.js"></script>

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

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

JavaScript

require([
        "jquery",
        "components/table/base/BaseGrid",
        "components/table/FixedHeaderGrid",
        "components/table/base/DynamicStrategy",
        "components/table/base/StaticGridDataProvider",         
    ], function($, BaseGrid, FixedHeaderGrid, DynamicGridStrategy, StaticGridDataProvider) {        
        
        //Create data provider
        var dataProvider = new StaticGridDataProvider(gridData).getData,
            headerDataProvider = new StaticGridDataProvider(headerGridData).getData;

        //create and init table component
        var baseGrid =  new FixedHeaderGrid({
            el: "#container",
            strategy: { 
                rows: "Dynamic",
                cols: "Static"
            },
            header: {
                getData: headerDataProvider,
                rowsHeight: 50
            },
            data: {
                getData: dataProvider,
                colsCount: 5,
                rowsCount: 5,                
            }                                                
        });
       
        //Initiate table rendering
        baseGrid.render();
        console.log(baseGrid);
        var resizer = function(){baseGrid.resizeGrid();};        
             
        jQuery("#container").resizable({                            
              resize: resizer
            //stop: resizer
        });
        
    });
    
//DATA        
        
    var headerGridData = [[{label: "Header."},{label: "1"},{label: "2"},{label: "3"},{label: "4"}, {label: "5"},{label: "6"},{label: "7"},{label: "8"},{label: "9"},{label: "10"},{label: "11"},{label: "12"},{label: "13"},{label: "14"}]];
        
        //Grid data
    var gridData = [            
            [{label: "21", rowspan: 10},{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "df"},{label: "22"},{label: "23"},{label: "24"},{label: "25"},{label: "21"},{label: "22"},{label: "23"},{label: "24"},{label: "25"}],
           ...