JRS 704-705: User wants to select multiple columns via API

by Yuriy Bablyukh

HTML

<link rel="stylesheet" type="text/css" 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/components/table/css/table.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.8.20.custom.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
};
    
require.config({
    baseUrl: __jrsConfigs__.urlContext + "/scripts",
});
</script>

<div id="container" style="margin-top:20px;height:500px;width:500px;background-color:#333333"></div>
<button id="left" style="margin-top: 50px;">Left</button>
<button id="right">Right</button>
<button id="resizeSelected">Resize selected</button>

JavaScript

require([
    "jquery",
    "components/table/base/BaseGrid",
    "components/table/FixedHeaderGrid",
    "components/table/base/DynamicGridStrategy",
    "components/table/base/StaticGridDataProvider",
], function($, BaseGrid, FixedHeaderGrid, DynamicGridStrategy, StaticGridDataProvider) {
    //Create data provider
    var dataProvider = new StaticGridDataProvider(gridData).getData,
        headerDataProvider = new StaticGridDataProvider(headerGridData).getData;
    //create and init table component
    var baseGrid = new FixedHeaderGrid({
        el: "#container",
        //strategy: "Dynamic",
        //height: 350,
        header: {
            getData: headerDataProvider,
            //rowsHeight: 100
        },
        data: {
            getData: dataProvider,
            
            colsCount: 5,
            rowsCount: 5,
            rowsHeight: 20,
            //colsWidth: 50,
            //colsBufferSize: 10,
            //rowsBufferSize: 10
        }
    });
    baseGrid.render();
    
    var selection;
    baseGrid.on("selection:change", function() {
       selection = baseGrid.getSelection();
        console.log("selection:change", selection);
    }).on("column:resize", function(options) {
       $(".jrs-grid-cell[data-column=" + options.column + "]").find("div").text(options.width);
        headerGridData[0][options.column].label = options.width;
       console.log("column:resize", options);
    });

     ////////////////////////
    //Other handlers
    /////////////////////////
    
    var resizer = _.bind(baseGrid.resizeGrid, baseGrid, {});
    //$(window).on("resize", resizer);        
    $("#container").resizable({
        stop: resizer,
        ghost: true,
        helper: "jrs-grid-resizable-helper"
    });
    
    $("#left").on("click", function(event) {
        var scroollPos = baseGrid.scrollPos();
        baseGrid.scrollTo(scroollPos.top, scroollPos.left - 1);
        event.stopPropagation();
    });
    
    $("#right").on("click",...