GRID DOC. Example 2.4: FixedHeader grid with reorder + Different implementation of cellRenderer

by obobruyko

HTML

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

<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">  
    
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/lib/require-2.1.10.js"></script>
         
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/require.config.js"></script>

<script>
var __jrsConfigs__ = {
    contextPath : "http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv",
    userLocale: "en",
    isXdm: true
};
    
require.config({
    baseUrl: __jrsConfigs__.contextPath + "/scripts",
});
</script>
<div id="container" style="margin-top:20px;height:400px;width:400px;"></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",
      "components/table/base/BaseGridCellRenderer"
  ], function ($, BaseGrid, FixedHeaderGrid, DynamicStrategy, StaticGridDataProvider, BaseGridCellRenderer) {

      //Create data provider
      var dataProvider = new StaticGridDataProvider(gridData),
          headerDataProvider = new StaticGridDataProvider(headerGridData),
          dataProviderGetData = dataProvider.getData,
          headerDataProviderGetData = headerDataProvider.getData,
          colsBufferSize = 14,
          rowsBufferSize = 7,
          cellRenderer = new BaseGridCellRenderer();
      
      cellRenderer.initGrid = function($el){
          $el.on("mousedown", _onClick);
      }; 
      
      cellRenderer.remove = function($el){
          $el.off("mousedown", _onClick);
      }; 
      
     
      
      _onClick = function(e) {
          var $cell = $(e.target).closest("td");
          if($cell.hasClass("clicked")) {
              $cell.removeClass("clicked");
              $cell.css({color: "#666"});
          } else {
              $cell.addClass("clicked");
              $cell.css({color: "red"});
          }
          console.log("Column: " + $cell.data("column") + " row: " + $cell.data("row"));          
      };

      //create and init table component
      var baseGrid = new FixedHeaderGrid({
          el: "#container",
          /*strategy: { rows: DynamicStrategy,
         cols: DynamicStrategy},*/
          cellRenderer: cellRenderer,
          //height: 200,
          //width: 300,
          header: {
              getData: headerDataProviderGetData
              //rowsHeight: 20
          },
          data: {
              getData: dataProviderGetData,
              colsWidth: 80,
              rowsHeight: 80,
              //colsCount: 6,
              //rowsCount:...