Reorder DEMO: Fixed header grid

by obobruyko

HTML

<link rel="stylesheet" href="http://192.168.1.69:8080/jrs_amber_adv/scripts/adhoc/api/css/adHocView.css" type="text/css" media="screen">

    <script type="text/javascript" src="http://192.168.1.69:8080/jrs_amber_adv/scripts/client/jasper.js"></script>
        
<div id="container" style="margin:20px;height:500px;width:500px;"></div>
   
<!--<button id="removeHS">Remove horizontal scroll</button>
<button id="removeVS">Remove vertical scroll</button>-->
    <div style="margin:60px 40px;">
        <div>
            <input id="gridWidth" type="text" placeholder="Grid width"/>
            <input id="gridHeight" type="text" placeholder="Grid height"/>
            <button id="resizeGrid">Resize grid</button>
        </div>
        
        <div>
            <input id="row" type="text" placeholder="Row index"/>
            <input id="column" type="text" placeholder="Column index"/>
            <input id="cellHeight" type="text" placeholder="Height"/>
            <input id="cellWidth" type="text" placeholder="Width"/>
            <button id="resizeCell">Resize</button>
        </div>
        <div>
            <input id="headerHeight" type="text"/>
            <button id="resizeHeader">Resize header</button>
        </div>
    </div>

CSS

.menu li.leaf:hover {
    background: #0A95D1;
    
}
.menu .button:hover {
    color: #fff !important;
}

JavaScript

var bi = jasper("http://192.168.1.69:8080/jrs_amber_adv"); 

bi([
      "jquery",
      "components/table/base/BaseGrid",
      "components/table/FixedHeaderGrid",
      "components/table/base/DynamicStrategy",
      "components/table/base/StaticGridDataProvider",
      "components/table/base/BaseGridCellRenderer",
      "components/table/base/BaseGridTemplateCellRenderer",
      "components/table/scrollableWidget/ScrollableWidget",
      "common/component/menu/ContextMenu"
  ], function ($, BaseGrid, FixedHeaderGrid, DynamicStrategy, StaticGridDataProvider, BaseGridCellRenderer, BaseGridTemplateCellRenderer, ScrollableWidget, ContextMenu) {

      //Create data provider
      var dataProvider = new StaticGridDataProvider(gridData),
          headerDataProvider = new StaticGridDataProvider(headerGridData),
          dataProviderGetData = dataProvider.getData,
          headerDataProviderGetData = headerDataProvider.getData,
          colsBufferSize = 6,
          rowsBufferSize = 6;           

      //create and init table component
      var baseGrid = new FixedHeaderGrid({
          el: "#container",
          strategy: { rows: DynamicStrategy,
         cols: DynamicStrategy},
          height: 500,
          width: 500,
          header: {
              getData: headerDataProviderGetData
              //rowsHeight: 20
          },
          data: {
              getData: dataProviderGetData,
              colsWidth: 100,
              rowsHeight: 100,
              colsCount: 6,
              rowsCount: 6, 
              colsBufferSize: colsBufferSize,
              rowsBufferSize: rowsBufferSize
          }
      });

      baseGrid.header().on("resize", function () {
          console.log(arguments);         
      });

      //Initiate table rendering
      baseGrid.render();
      
      //context menu
      var getMenuOptions = function(column, selection){         
          var lastIndex =...