Crosstab: Select through API

by obobruyko

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:400px;width:700px"></div>
<button id="left" style="margin-top: 50px;">Left</button>
<button id="right">Right</button>
<button id="top" style="margin-top: 50px;">Top</button>
<button id="bottom">Bottom</button>
<br/>
<br/>
<button id="select">select</button>
<button id="addSelection">addSelection</button>
<button id="deselect">deselect</button>
<button id="clearSelection">clearSelection</button>
<button id="getSelection">getSelection</button>

JavaScript

require([
    "jquery",
    "components/table/Crosstab",
    "components/table/base/DynamicGridStrategy",
    "components/table/base/StaticGridDataProvider", ], function ($, Crosstab, DynamicGridStrategy, StaticGridDataProvider) {

    //Create data provider
    var dataProvider = new StaticGridDataProvider(gridData).getData,
        headerDataProvider = new StaticGridDataProvider(headerData).getData,
        columnGroupDataProvider = new StaticGridDataProvider(columnGroupData).getData,
        rowGroupDataProvider = new StaticGridDataProvider(rowGroupData).getData;

    //create and init table component
    var crosstab = new Crosstab({
        el: "#container",
        //strategy: "Dynamic",
        header: {
            getData: headerDataProvider,
            colsCount: 3,
            rowsCount: 4
        },
        columnGroup: {
            getData: columnGroupDataProvider,
            rowsBufferSize: 10
        },
        rowGroup: {
            getData: rowGroupDataProvider,
            colsBufferSize: 10
        },
        data: {
            getData: dataProvider,
            colsCount: 5,
            rowsCount: 5,
            colsBufferSize: 6,
            rowsBufferSize: 6
        }
    });
    crosstab.render();
        
        var selection;
     crosstab.on("selection:change", function() {
        selection = crosstab.header().getSelection();
        console.log("selection:change",selection);
    });

        
    crosstab.header().on("selection:change", function() {
        console.log("selection:change header excecuted");
    });
        

   

    $("#select").on("click", function (event) {
        crosstab.header().select([
            {row: 0, column: 0}, 
            {row: 1, column: 0},
            {row: 2,column: 0},
            {row: 3,column: 0}
            
           ]);
        
        crosstab.columnGroup().select([
            {row: 0, column: 0}, 
            {row: 1, column: 0}
        ]);
        
        
       ...