Showing posts with label Stimulsoft Reports.JS is a platform for generating reports using JavaScript and HTML5. Angularjs. Show all posts
Showing posts with label Stimulsoft Reports.JS is a platform for generating reports using JavaScript and HTML5. Angularjs. Show all posts

Stimulsoft Report Viewer Angularjs And Javascript

Stimulsoft Report Viewer Angularjs And Javascript


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

Stimulsoft Report Viewer Angularjs And Javascript



controller.js





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>

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.


DBconnection
dbconnection
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 -->


<script>
  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;
    designer.report = e.report;
   };
   
   viewer.renderHtml("viewerContent");
  }
  
  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;
   }
   
   designer.renderHtml("designerContent");
  }
  
  function setReport(reportObject) {
   // Forcibly show process indicator
   viewer.showProcessIndicator();
   
   // 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
    report.load(reportObject);

    // Remove all connections in report template (they are used in the first place)
    report.dictionary.databases.clear();
    // Registered JSON data specified in the report with same name
    report.regData("Demo", "Demo", Demo);
    // Assign the report to the viewer
    viewer.report = 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() {
   createViewer();
   selectedButton = document.getElementById("SimpleList");
   onButtonClick(selectedButton, SimpleList);
  }
  
  // Demo Report button events
  // ---
  
  function onButtonClick(button, reportObject) {
   selectedButton.className = "ReportButton";
   button.className = "ReportButton Selected";
   selectedButton = button;
   setReport(reportObject);
  }
  
  function onButtonMouseOver(button) {
   if (button != selectedButton) button.className = "ReportButton Over";
  }
  
  function onButtonMouseOut(button) {
   if (button != selectedButton) button.className = "ReportButton";
  }
 </script>
Html Files
<body onload="onBodyLoad();">
 <div id="designerContent"></div>
 <table class="Main" cellpadding="0" cellspacing="4">
  <tr>
   <td width="150px">
    <table class="LeftPanel" cellpadding="0" cellspacing="0">
     <tr>
      <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>
     </tr>
     <tr>
      <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) {
          document.write(
           "<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>" +
           "</a>");
         }
        </script>
       </div>
      </td>
     </tr>
    </table>
   </td>
   <td height="100%" id="viewerContent"></td>
  </tr>
 </table>
</body>
</html>