Visualize: Render report with pagination

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>
<script type='text/javascript' src="http://build-master.jaspersoft.com:7480/jrs-pro-feature-jive-refactoring/client/visualize.js?_opt=false"></script>

<div style="float: left;">
	<h3>Heading format for 5th column</h3>
	Align:  <select id="headingFormatAlign"><option value="left">left</option><option value="center">center</option><option value="right">right</option></select>

	<br/>
	Background color: <input type="text" id="headingFormatBgColor" value=""/>

	<br/>
	Font size: <input type="text" id="headingFormatFontSize" value=""/>

	<br/>
	Font color: <input type="text" id="headingFormatFontColor" value=""/>

	<br/>
	Font name: <input type="text" id="headingFormatFontName" value=""/>

	<br/>
	Bold: <input type="checkbox" id="headingFormatFontBold" value="true"/>

	<br/>
	Italic: <input type="checkbox" id="headingFormatFontItalic" value="true"/>

	<br/>
	Underline: <input type="checkbox" id="headingFormatFontUnderline" value="true"/>

	<br/><br/>

	<button id="changeHeadingFormat">Change heading format</button>
</div>
<div style="float: left;">
	<h3>Details row format for 5th column</h3>
	Align: <select id="detailsRowFormatAlign"><option value="left">left</option><option value="center">center</option><option value="right">right</option></select>

	<br/>
	Background color: <input type="text" id="detailsRowFormatBgColor" value=""/>

	<br/>
	Font size: <input type="text" id="detailsRowFormatFontSize" value=""/>

	<br/>
	Font color: <input type="text" id="detailsRowFormatFontColor" value=""/>

	<br/>
	Font name: <input type="text" id="detailsRowFormatFontName" value=""/>

	<br/>
	Bold: <input type="checkbox" id="detailsRowFormatFontBold" value="true"/>

	<br/>
	Italic: <input type="checkbox" id="detailsRowFormatFontItalic" value="true"/>

	<br/>
	Underline: <input type="checkbox" id="detailsRowFormatFontUnderline" value="true"/>
	   ...

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var columns,
    report = v.report({
        resource: "/public/Visualize/Adhoc/tableReport",
        container: "#container",
        events: {
            reportCompleted: function (status, error) {
                if (status === "ready") {
                    columns = _.filter(report.data().components, function (component) {
                        return component.componentType == "tableColumn";
                    });
                    
                    var column4 = columns[4];

                    $("#label").val(column4.label);
                    
                    $("#headingFormatAlign").val(column4.headingFormat.align);
                    $("#headingFormatBgColor").val(column4.headingFormat.backgroundColor);
                    $("#headingFormatFontSize").val(column4.headingFormat.font.size);
                    $("#headingFormatFontColor").val(column4.headingFormat.font.color);
                    $("#headingFormatFontName").val(column4.headingFormat.font.name);
                    if (column4.headingFormat.font.bold) {
                        $("#headingFormatFontBold").attr("checked", "checked");
                    } else {
                        $("#headingFormatFontBold").removeAttr("checked");
                    }
                    if (column4.headingFormat.font.italic) {
                        $("#headingFormatFontItalic").attr("checked", "checked");
                    } else {
                        $("#headingFormatFontItalic").removeAttr("checked");
                    }
                    if (column4.headingFormat.font.underline) {
                        $("#headingFormatFontUnderline").attr("checked", "checked");
                    } else {
                        $("#headingFormatFontUnderline").removeAttr("checked");
                    }
                    
                   ...