Stimulsoft Reports.JS is a platform for generating reports using JavaScript and HTML5. Angularjs

Stimulsoft Reports.JS is a platform for generating reports using JavaScript and HTML5.

Stimulsoft Reports.js is a platform for generating report using javascript and html5. Normally html design and report geneerating and stimulsoft is autometically report generation and connection string your db connection and wrtie query auto function generation report.

Stimulsoft Report is modify design any design easily modifed and watermark and everything is very easy.

View Report
View Report
Include Files:
 <link href="css/demo.css" rel="stylesheet">
 <!-- Report Viewer Office2013 style -->
 <link href="css/stimulsoft.viewer.office2013.whiteblue.css" rel="stylesheet">
 <!-- Report Designer Office2013 style -->
 <link href="css/stimulsoft.designer.office2013.whiteblue.css" rel="stylesheet">
 <!-- Stimusloft Reports.JS -->
 <script src="scripts/stimulsoft.reports.js" type="text/javascript"></script>
 <script src="scripts/stimulsoft.viewer.js" type="text/javascript"></script>
 <script src="scripts/stimulsoft.designer.js" type="text/javascript"></script>

 <!-- Reports -->
 <script src="reports/OnlineStoreSales.js" type="text/javascript"></script>
 <script src="reports/UsersAppleIpad.js" type="text/javascript"></script>
 <script src="reports/SmartphoneBestsellersInQ12015.js" type="text/javascript"></script>
 <script src="reports/SiteStatistics.js" type="text/javascript"></script>
 <script src="reports/HighlightCondition.js" type="text/javascript"></script>
 <script src="reports/Images.js" type="text/javascript"></script>
 <script src="reports/MasterDetail.js" type="text/javascript"></script>
 <script src="reports/MultiColumnList.js" type="text/javascript"></script>
 <script src="reports/SideBySideListWithContainers.js" type="text/javascript"></script>
 <script src="reports/SimpleGroup.js" type="text/javascript"></script>
 <script src="reports/SimpleList.js" type="text/javascript"></script>
 <script src="reports/ParametersSelectingCountry.js" type="text/javascript"></script>

 <!-- Demo data -->

  var viewer = null;
  var designer = null;
  function createViewer() {
   // Specify necessary options for the viewer
   var options = new Stimulsoft.Viewer.StiViewerOptions();
   options.height = "100%";
   options.appearance.scrollbarsMode = true;
   options.toolbar.showDesignButton = true;
   options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Direct;
   options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table;

   // Create an instance of the viewer
   viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
   // Add the design button event
   viewer.onDesignReport = function (e) {
    this.visible = false;
    if (designer == null) createDesigner();
    designer.visible = true; =;
  function createDesigner() {
   var options = new Stimulsoft.Designer.StiDesignerOptions();
   options.appearance.fullScreenMode = true;
   options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table;
   // Create an instance of the designer
   designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
   // Add the exit menu item event
   designer.onExit = function (e) {
    this.visible = false;
    viewer.visible = true;
  function setReport(reportObject) {
   // Forcibly show process indicator
   // Timeout need for immediate display loading report indicator
   setTimeout(function () {
    // Create a new report instance
    var report = new Stimulsoft.Report.StiReport();
    // Load reports from JSON object

    // Remove all connections in report template (they are used in the first place)
    // Registered JSON data specified in the report with same name
    report.regData("Demo", "Demo", Demo);
    // Assign the report to the viewer = report;
   }, 50);
  // Set report button style
  function setReportButton(button) {
   for (var reportName in reportsCollection) {
    var reportButton = document.getElementById(reportName);
    reportButton.isSelected = reportButton == button;
    reportButton.className = reportButton.isSelected ? "ReportButton Selected" : "ReportButton";
  // Load first report after the page is loaded
  function onBodyLoad() {
   selectedButton = document.getElementById("SimpleList");
   onButtonClick(selectedButton, SimpleList);
  // Demo Report button events
  // ---
  function onButtonClick(button, reportObject) {
   selectedButton.className = "ReportButton";
   button.className = "ReportButton Selected";
   selectedButton = button;
  function onButtonMouseOver(button) {
   if (button != selectedButton) button.className = "ReportButton Over";
  function onButtonMouseOut(button) {
   if (button != selectedButton) button.className = "ReportButton";
Html Files
<body onload="onBodyLoad();">
 <div id="designerContent"></div>
 <table class="Main" cellpadding="0" cellspacing="4">
   <td width="150px">
    <table class="LeftPanel" cellpadding="0" cellspacing="0">
      <td height="60px">
       <img style="position: absolute; width: 150px; left: 0px; top: 5px;" src="images/StimulsoftReports.png" />
       <img style="position: absolute; width: 30px; height: 30px; left: 105px; top: 25px;" src="images/Js.png" />
      <td height="90%">
       <div class="Buttons">
        <script type="text/javascript">
         // Report id and names for this Demo
         var reportsCollection = {
          "OnlineStoreSales": "Online Store Sales",
          "SimpleList": "Simple List",
          "HighlightCondition": "Highlight Condition",
          "Images": "Images",
          "MasterDetail": "Master-Detail",
          "UsersAppleIpad": "Users Apple Ipad",
          "SmartphoneBestsellersInQ12015": "Smartphone Bestsellers In Q1 2015",
          "MultiColumnList": "Multi-Column List",
          "SimpleGroup": "Simple Group",
          "SiteStatistics": "Site Statistics",
          "ParametersSelectingCountry": "Parameters Selecting Country"
         // Render all report buttons
         for (var reportName in reportsCollection) {
           "<a class=\"ReportButton\" id=\"" + reportName + "\"" + 
           "onmouseover=\"onButtonMouseOver(this)\"" +
           "onmouseout=\"onButtonMouseOut(this)\"" + 
           "onclick=\"onButtonClick(this, " + reportName + ")\">" +
           "<table cellpadding=\"0\" cellspacing=\"0\">" +
           "<tr><td style=\"text-align: center; width: 100%;\"><img src=\"images/" + reportName + ".png\" /></td></tr>" +
           "<tr><td class=\"Caption\">" + reportsCollection[reportName] + "</td></tr>" +
           "</table>" +
   <td height="100%" id="viewerContent"></td>

Stimulsoft Reports.JS is a platform for generating reports using JavaScript and HTML5. Angularjs Dev2Tricks 5 of 5
Stimulsoft Reports.JS is a platform for generating reports using JavaScript and HTML5. Stimulsoft Reports.js is a platform for generat...

Share this

Related Posts

Next Post »