JRS 106 - User can resize fixed header and see that columns resized

by obobruyko

HTML

<link type="text/css" rel="stylesheet" href="http://localhost:8080/JRS-pro/scripts/components/table/css/table.css">
<link type="text/css" rel="stylesheet" href="http://localhost:8080/JRS-pro/scripts/jquery/theme/redmond/jquery-ui-1.8.20.custom.css">
    
<script src="http://192.168.1.236:8080/jsproadv/scripts/require-jquery.js"></script>
<script>
        
var __jrsConfigs__ = {
   urlContext : "http://localhost:8080/JRS-pro"
};
    
require.config({
    baseUrl: "http://localhost:8080/JRS-pro/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",
        "jquery.ui" : "jquery/js/jquery-ui-1.8.20.custom.min",
        "jquery.mousewheel": "common/lib/jquery.mousewheel-3.1.9",
        "perfect-scrollbar": "common/lib/perfect-scrollbar-0.4.6"
    },
    
    shim: {
        "jrs.configs": {
            exports: "__jrsConfigs__"
        },
        "jquery.ui":{
            deps:["jquery"],
            exports: "jQuery"
        },
    }
});    
</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 id="container" style="margin-top:20px;height:500px;width:100%"></div>

CSS

/*! 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 .ps-scrollbar-y-rail.hover{/*background-color:#eee;*/opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y-rail.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-x{position:absolute;bottom:0;height:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s...

JavaScript

//<%-- ****************************************************** --%>
//<%-- US 106                  --%>
//<%-- ****************************************************** --%>
    

    require([
        "jquery",
        "components/table/BaseGrid",
        "components/table/FixedHeaderGrid",
        "components/table/DynamicGridStrategy",
        "components/table/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",
            header: {
                getData: headerDataProvider,
                rowsHeight: 50
            },
            data: {
                getData: dataProvider,
                //Strategy: DynamicGridStrategy,
                colsCount: 5,
                rowsCount: 5,                
            }                                                
        });
            
        baseGrid.header().on("resize", function() {
            console.log(arguments);
        });
        
        //Initiate table rendering
        baseGrid.render();
        
        
        var resizer = _.bind(baseGrid.resizeGrid, baseGrid),
            headerResizer = _.bind(function(event, ui) {
                this.resizeHeader(ui.size.height);
            }, baseGrid);
        
        //$(window).on("resize", resizer);        
        $("#container").resizable({                            
            stop: resizer,
            ghost: true,
            helper: "jrs-grid-resizable-helper"
        });
        
        $(".jrs-header-grid-container").resizable({                
            handles: "s",
            ghost: true,
            helper:...