Visualize: table row selection

Test plugins

by Yuriy Bablyukh

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<!--Provide URL to visualize.js-->
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js?userTimezone=America/Los_Angeles"></script>
<!--Provide container to render your visualization-->
<div id="details"></div>
<div id="container"></div>

CSS

#details {
  margin-bottom: 10px;
}

#container{
  height:700px;
}

JavaScript

visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {
  var ahv = v.adhocView({
    resource: "/public/Ad_Hoc_View1",
    container: "#container",
    linkOptions: {
      events: {
        click: function(ev, data, defaultHandler, extendedData) {
          console.log(data, extendedData);
          $("#details").html(renderDetails(extendedData, data));
        }
      }
    }
  });
});

function renderDetails(data, mainData) {
  return template = _.template("<table border='1' cellspacing='0'><thead><tr><th>Column id</th><th>Value</th></tr></thead><tbody><% data.row.cells && data.row.cells.forEach(function (cell) { %><tr><td><%= cell.reference%></td><td><%= mainData[cell.reference] %></td></tr><% }) %></tbody></table>")({
    data: data,
    mainData: mainData
  });
}