GRID DOC. Example 2.6: FixedHeader grid with Context menu

by obobruyko

HTML

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

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

    require.config({
        baseUrl: __jrsConfigs__.urlContext + "/scripts",
    });
</script>
<div id="container" style="margin:20px 40px;height:500px;width:500px;"></div>

<div>
    <button id="scrollLeft">Left</button>
    <button id="scrollRight">Right</button>
</div>

JavaScript

require([
      "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 = 7,
          rowsBufferSize = 6; 
      
      //create and init table component
      var baseGrid = new FixedHeaderGrid({
          el: "#container",
          strategy: { 
              rows: DynamicStrategy,
              cols: DynamicStrategy
          },          
          header: {
              getData: headerDataProviderGetData
          },
          data: {
              getData: dataProviderGetData,
              colsWidth: 100,
              rowsHeight: 100,              
              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 = $(baseGrid.getEl()).find("td[data-row=0]").last().data("column"), 
              menuOptions = [
                  {
                      label: "Move left", 
                      action: "left",
    ...