GRID DOC. Example 2.5: FixedHeader grid with ScrollableWidget + Template 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"> 
    
<link rel="stylesheet" type="text/css" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/lib/jquery/theme/redmond/jquery-ui-1.10.4-custom.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:500px;width:500px;"></div>
    
<button id="removeHS" style="margin-top:50px;">Remove horizontal scroll</button>
<button id="removeVS">Remove vertical scroll</button>

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"
  ], function ($, BaseGrid, FixedHeaderGrid, DynamicStrategy, StaticGridDataProvider, BaseGridCellRenderer, BaseGridTemplateCellRenderer, ScrollableWidget) {

      //Create data provider
      var dataProvider = new StaticGridDataProvider(gridData),
          headerDataProvider = new StaticGridDataProvider(headerGridData),
          dataProviderGetData = dataProvider.getData,
          headerDataProviderGetData = headerDataProvider.getData,
          colsBufferSize = 7,
          rowsBufferSize = 4,
          template = "<div class='templateCR'>{{=cellMetadata.label}}</div>",
          cellRenderer = new BaseGridCellRenderer(),
          templateCellRenderer = new BaseGridTemplateCellRenderer({template: template});         
     
      cellRenderer.initGrid = function($el){
          $el.on("mousedown", _onClick);
      }; 
      
      cellRenderer.remove = function($el){
          $el.off("mousedown", _onClick);
      }; 
      
      var state = true;  
      
      _onClick = function(e) {
          var $cell = $(e.target).closest("td");
          console.log("Column: " + $cell.data("column") + " row: " + $cell.data("row"));
           
          if ( state ) {
            $cell.animate({
                fontSize: "20",
                color: "#003366"
            }, 500 );
          } else {
            $cell.animate({
                color: "#666",
                fontSize: "11",
            }, 500 );
          }
          state = !state;    
      };

      //create and init table component
      var baseGrid = new FixedHeaderGrid({
          el: "#container",
          /*strategy:...