Stimulsoft Report Viewer Angularjs And Javascript Stimulsoft Report Viewer Generate Report looking pretty design and export tool and design included this report. stimulsoft report is manual code follow us
app.controller('PDrport', ['$scope', '$filter', '$http', function ($scope, $filter, $http) {
var viewer = new Stimulsoft.Viewer.StiViewer(null, "StiViewer", false);
$scope.onShowClick = function () {
/* var jsonStrings = {
"Test": [{
"SID": 1,
"StaffID": "AD",
"StaffName": "Administrator",
"BranchID": 14
}]
}*/
$http.get('../api/Category').success(function (datas) {
var jsonStrings = datas;
var jsonData = JSON.stringify(jsonStrings);
var dataSet = new Stimulsoft.System.Data.DataSet();
dataSet.readJson(jsonData);
var data = dataSet.tables.getByIndex(0);
var report = new Stimulsoft.Report.StiReport();
//Add data to datastore
report.regData("data", "data", dataSet);
//Fill dictionary
var dataSource = new Stimulsoft.Report.Dictionary.StiDataTableSource(data.tableName, data.tableName, data.tableName);
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("CategoryID", "CategoryID", "CategoryID"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Category", "Category", "Category"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("SalesAcctID", "SalesAcctID", "SalesAcctID"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("PurchaseAcctID", "PurchaseAcctID", "PurchaseAcctID"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("NonStock", "NonStock", "NonStock"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("ItemRefID", "ItemRefID", "ItemRefID"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Discontinued", "Discontinued", "Discontinued"));
/* dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Resigned", "Resigned", "Resigned"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("DateJoin", "DateJoin", "DateJoin"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("DateResign", "DateResign", "DateResign"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("StaffPosition", "StaffPosition", "StaffPosition"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("StaffUnitCost", "StaffUnitCost", "StaffUnitCost"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("HandPhone", "HandPhone", "HandPhone"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Extension", "Extension", "Extension"));
dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Address", "Address", "Address"));*/
// dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Column4", "Column4", "Column4")); /**/
report.dictionary.dataSources.add(dataSource);
var page = report.pages.getByIndex(0);
//Create HeaderBand
var headerBand = new Stimulsoft.Report.Components.StiHeaderBand();
headerBand.height = 0.5;
headerBand.name = "HeaderBand";
page.components.add(headerBand);
//Create Databand
var dataBand = new Stimulsoft.Report.Components.StiDataBand();
dataBand.dataSourceName = data.tableName;
dataBand.height = 0.5;
dataBand.name = "DataBand";
page.components.add(dataBand);
//Create texts
var pos = 0;
var columnWidth = Stimulsoft.Base.StiAlignValue.alignToMinGrid(page.width / data.columns.count, 0.1, true);
var nameIndex = 15;
for (var index in data.columns.list) {
var dataColumn = data.columns.list[index];
//console.log(dataColumn);
//Create text on header
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = false;
var designer = new Stimulsoft.Designer.StiDesigner(options, 'StiDesigner', false);
var headerText = new Stimulsoft.Report.Components.StiText();
headerText.clientRectangle = new Stimulsoft.Base.Drawing.RectangleD(pos, 0, columnWidth, 0.5);
headerText.text = dataColumn.caption;
headerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Center;
headerText.name = "HeaderText" + nameIndex.toString() + 'Header';
headerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.lightpurple);
headerText.border.side = Stimulsoft.Base.Drawing.StiBorderSides.All;
headerBand.components.add(headerText);
// "Watermark":{"TextBrush":"solid:50,0,0,0","Text":"LabourExpress"},
//Create text on Data Band
var dataText = new Stimulsoft.Report.Components.StiText();
dataText.clientRectangle = new Stimulsoft.Base.Drawing.RectangleD(pos, 0, columnWidth, 0.5);
//dataText.text = format("{{0}.{1}}", data.tableName, dataColumn.columnName);
String.format = function () {
var s = arguments[0];
for (var i = 0; i < arguments.length - 1; i++) {
var reg = new RegExp("\\{" + i + "\\}", "gm");
s = s.replace(reg, arguments[i + 1]);
}
return s;
};
dataText.text = String.format("{{0}.{1}}", data.tableName, dataColumn.columnName);
dataText.name = "DataText" + nameIndex.toString();
dataText.border.side = Stimulsoft.Base.Drawing.StiBorderSides.All;
//Add highlight
var condition = new Stimulsoft.Report.Components.StiCondition();
condition.backColor = Stimulsoft.System.Drawing.Color.gray;
condition.textColor = Stimulsoft.System.Drawing.Color.black;
condition.expression = "(Line & 1) == 1";
condition.item = Stimulsoft.Report.Components.StiFilterItem.Expression;
dataText.conditions.add(condition);
dataBand.components.add(dataText);
pos = pos + columnWidth;
nameIndex++;
}
//Create FooterBand
var footerBand = new Stimulsoft.Report.Components.StiFooterBand();
footerBand.height = 0.5;
footerBand.name = "FooterBand";
page.components.add(footerBand);
//Create text on footer
var footerText = new Stimulsoft.Report.Components.StiText();
footerText.clientRectangle = new Stimulsoft.Base.Drawing.RectangleD(0, 0, page.width, 0.5);
footerText.text = "Count - {Count()}";
footerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Right;
footerText.name = "FooterText";
footerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.white);
footerBand.components.add(footerText);
var Watermark = new Stimulsoft.Report.Components.StiText();
Watermark.clientRectangle = new Stimulsoft.Base.Drawing.RectangleD(0, 0, page.width, 0.5);
Watermark.text = "Count - {Count()}";
// Watermark.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Right;
// Watermark.name = "FooterText";
Watermark.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.black);
// Watermark.components.add(Watermark);
//Render report
// Page1.Watermark.Text = Totals.Sum(Categories, Categories.CategoryID).ToString();
// var Watermark = new Stimulsoft.Report.Components.StiText();
// Watermark.text = 'LabourExpress';
// report.Watermark.Enabled = true
// report.Watermark.Angle = 45
// report.Watermark.Text = "MyWatermark"
// report.render();
// designer.report = report;
viewer.report = report;
viewer.renderHtml('viewer');
});
/*var viewer = new $window.Stimulsoft.Viewer.StiViewer(null, 'StiViewer', false);
var report = new $window.Stimulsoft.Report.StiReport();
report.loadFile('../streport/mrt/Reportts.mrt');
viewer.report = report;
viewer.renderHtml('viewer');*/
};}]);
Html Page
<div ng-controller="PDrport">
<link rel="stylesheet" href="../streport/css/stimulsoft.designer.office2013.whiteblue.css">
<link rel="stylesheet" href="../streport/css/stimulsoft.viewer.office2013.whiteblue.css">
<link rel="stylesheet" href="../streport/css/stimulsoft.designer.office2013.lightgrayteal.css">
<script src="../streport/scripts/stimulsoft.reports.js"></script>
<script src="../streport/scripts/stimulsoft.viewer.js"></script>
<script src="../streport/scripts/stimulsoft.designer.js"></script>
<form name="test">
<input type="text" ng-model="jsonString" value="test" />
<input type="submit" value="Show" ng-click="onShowClick()" />
</form>
<style type="text/css">
#StiViewerReportPanel {
/* z-index:-1 !important; */
}
.stiJsViewerMenu {
/* z-index: 9999 !important;*/
}
</style>
<p id="viewer"></p>
</div>
