Fixed header grid: working example

by obobruyko

HTML

<link type="text/css" rel="stylesheet" href="http://192.168.1.74:8080/jrs_amber_adv/scripts/components/table/css/table.css">
    <link type="text/css" rel="stylesheet" href="http://192.168.1.74:8080/jrs_amber_adv/scripts/lib/jquery/theme/redmond/jquery-ui-1.8.20.custom.css">

<link type="text/css" rel="stylesheet" href="http://192.168.1.74:8080/jrs_amber_adv/scripts/components/table/css/perfect-scrollbar.css">
    
<script src="http://192.168.1.74:8080/jrs_amber_adv/scripts/lib/require-jquery-2.1.2.js"></script>
    
<script src="http://192.168.1.74:8080/jrs_amber_adv/scripts/require.config.js"></script>
    
    <!--<script src="http://192.168.1.74:8080/jrs_amber_adv/scripts/lib/jquery/ui/jquery.ui.touch-punch.js"></script>-->

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

    <div id="container" style="margin-top:20px;height:250px;width:250px;">
        
    </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>
    
    <div>
        <label>Scroll to</label>
        <label>Top</label>
        <input type="text" id="top"></input>
        <label>Left</label>
        <input type="text" id="left"></input>
        <button id="scrollTo">Scroll To</button>        
    </div>

JavaScript

require([
        "jquery",
        "components/table/base/BaseGrid",
        "components/table/FixedHeaderGrid",
        "components/table/base/DynamicStrategy",
        "components/table/base/StaticGridDataProvider"       
    ], function($, BaseGrid, FixedHeaderGrid, DynamicStrategy, 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",
            /*strategy: { rows: DynamicStrategy,
                       cols: DynamicStrategy},*/
            height: 200,
            width: 200,
            header: {
                getData: headerDataProvider
                //rowsHeight: 20
            },
            data: {
                getData: dataProvider,
                colsWidth: 40,
                rowsHeight: 40,
                //colsCount: 6,
                //rowsCount: 6, 
                colsBufferSize: 7,
                rowsBufferSize: 7
            }                                                
        });    
                           
        baseGrid.header().on("resize", function() {
            console.log(arguments);
        });
        
        //Initiate table rendering
        baseGrid.render();
        
        console.log(baseGrid.headerGrid.model.attributes);
        
        $(baseGrid.getEl()).append("<div class='wrapper'></div>");
                
        var resizer = function(){baseGrid.resizeGrid();}/*, {width: 150, height: 150}*/;
        
        $("#resizeGrid").on("click", function() {
            baseGrid.resizeGrid({
                height: parseInt($("#gridHeight").val()),
                width: parseInt($("#gridWidth").val()),
                colsSizes: [20],
                rowsSizes: [20]
            });
    ...