JRS 201 - User can resize viewport API

by sprilukin

HTML

<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">  
<link rel="stylesheet" type="text/css" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/lib/jquery/theme/redmond/jquery-ui-1.8.20.custom.css">

    
<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>
<div id="container" style="margin-top:20px;height:300px;width:400px;background-color:#123456"></div>
        </div>

JavaScript

//<%-- ****************************************************** --%>
//<%-- US 201 - User can resize viewport API                  --%>
//<%-- ****************************************************** --%>
    

    require([
        "jquery",
        "components/table/base/BaseGrid",
        "components/table/FixedHeaderGrid",
        "components/table/base/DynamicGridStrategy",
        "components/table/base/StaticGridDataProvider",         
    ], function($, BaseGrid, FixedHeaderGrid, DynamicGridStrategy, StaticGridDataProvider) {        
        //Create data provider
        //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",
                height: 250,
            //width:300,
            header: {
                getData: headerDataProvider,
                //rowsHeight: 20
            },
            data: {
                getData: dataProvider,
                //Strategy: DynamicGridStrategy,
                rowsCount: 5,  
                //colsCount:5,
                //colsWidth: 100,  
                rowsHeight:20
            }                                                
        });
               
        /*var baseGrid =  new BaseGrid({
            //el: "#container",
            getData: dataProvider,
            Strategy: DynamicGridStrategy,
            width: 5,
            height: 5,
            gridHeight: "100%",
            gridWidth: "100%",            
        });       
        $("#container").append(baseGrid.getEl());*/

        //Initiate table rendering
        baseGrid.render();
        var resizer = _.bind(baseGrid.resizeGrid, baseGrid, {}),
            headerResizer = _.bind(function(event, ui) {
                this.resizeHeader(ui.size.height);
            }, baseGrid);
        
     ...