GRID DOC. Example 4: FixedHeaderGrid with DynamicStrategy

by tara5

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<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/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 class="table-container">
    <div class="table-headerTable table-cell table-cellHeader">Data Source Preview</div>
    <div id="container" >
         
    </div>
</div>

CSS

.iconDisclosure {
    background-repeat: no-repeat;
}
.iconDisclosure-scheduled {
    background-position: 0 -396px !important;
}
.table-headerTable.table-cellHeader {
    font-weight:bold;
}
.table-container{
    margin-top: 20px;
    margin-left: 20px;
}

/*------------------------------------------
MODULES STYLESHEET

Project:		JasperReports Server
Version:		.01
Last change:	03/20/14
Author:			Anna Leeg
-------------------------------------------*/

/*----------------*/
/*  TABLE MODULE  */
/*----------------*/

.table {
    border-collapse:separate;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
}

.table-header {}

.table-cell {
    border-collapse:separate;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#666666;
    height: 24px;
    line-height:1.4em;
    overflow: hidden;
    padding: 3px 4px;
    position: relative;
    text-align:left;
    vertical-align: top;
    white-space: normal;
    word-wrap: break-word;
}

/* table-cell varieties */

/* thead rows */
.table-headerColumns {
    /* background:linear-gradient(#E1E9F3, #D4DEE9) repeat scroll 0 0 transparent; */
    background-color:#D4DEE9;
}

.table-headerTable {
   background-image:...

JavaScript

require([
        "jquery",
        "components/table/base/BaseGrid",
        "components/table/FixedHeaderGrid",
        "components/table/base/DynamicStrategy",
        "components/table/base/StaticGridDataProvider"
    ], function($, BaseGrid, FixedHeaderGrid, DynamicGridStrategy, StaticGridDataProvider) {        
        
        //Create data provider
        var dataProvider = new StaticGridDataProvider(gridData).getData,
            headerDataProvider = new StaticGridDataProvider(headerGridData).getData;
          
        // A little bit changed template ( added cell.contentClass) 
        var template = '<table class="jrs-grid table tableResults" style="height: {{=totalHeight}}px; width: {{=totalWidth}}px;" unselectable="on" onselectstart="return false">' + 

    '<colgroup>'+
        '{{_.each(widths, function(width) { }}'+
        '<col style="width: {{=width}}px;">'+
        '{{ }); }}'+
    '</colgroup>'+

    '<tbody>'+
    '{{_.each(data, function(row, y) { }}'+
    '<tr style="height: {{=heights[y]}}px;">'+
        '{{_.each(row, function(cell, x) { }}'+
        '{{ if (cell && !cell.isHelper) { }}'+
        '<td class="{{=cell.className}} jrs-grid-cell"'+
            ' data-column="{{=cell.column}}" data-row="{{=cell.row}}"'+
            ' data-visibleColumn="{{=cell._meta.column}}" data-visibleRow="{{=cell._meta.row}}"'+
            ' colspan="{{=cell.colspan}}" rowspan="{{=cell.rowspan}}">'+
            '<div class="jrs-grid-cell-content-container" style="position: relative;">'+
                '<div class="jrs-grid-cell-content {{=cell.contentClass}}"'+
                     ' style="width:{{=widths[x]}}px; height:{{=heights[y]}}px;"'+
                     ' title="{{- cellRenderer.getTitle(x, y, cell) }}">'+
                     ' {{= cellRenderer.getContent(x, y, cell) }}'+
                '</div>'+
            '</div>'+
        '</td>'+
        '{{ } }}'+
        '{{ }); }}'+
   '</tr>'+
    '{{ }); }}'+
    '</tbody>'+
'</table>';
        
...