GRID DOC. Example 2.5: FixedHeader grid with ScrollableWidget + Template cellRenderer

by Yuriy Bablyukh

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="disableSelection" style="margin-top:50px;">Disable Selection</button>
<button id="enableSelection" style="margin-top:50px;">Enable Selection</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 = "<a href='http://google.com' title='{{=cellMetadata.label}}' class='templateCR'>{{=cellMetadata.label}}</div>",
          cellRenderer = new BaseGridCellRenderer(),
          templateCellRenderer = new BaseGridTemplateCellRenderer({template: template});         
     
      cellRenderer.initGrid = function($el){
          $el.on("mousedown", _onMouseDown);
          $el.on("click", _.bind(_onClick, $el));
          $el.on("mouseover", _onMouseOver);
          $el.on("mouseleave", _onMouseLeave);
      }; 
      
      cellRenderer.remove = function($el){
          $el.off("mousedown", _onMouseDown);
          $el.off("click", _onClick);
          $el.off("mouseover", _onMouseOver);
          $el.off("mouseleave", _onMouseLeave);
      }; 
      
      var state = true;  
      
      _onMouseDown = function(e) {
          var $cell = $(e.target).closest("td");
          if(!$cell.data("clicked")){
              $cell.attr("data-clicked");
              $cell.data("clicked", true);
          } else {
              $cell.data("clicked", false);
          }
         ...