Creating reports and dashboards | Stimulsoft community forum

Reporting tool and data analytics tools for creating reports and dashboards in ASP.NET, ASP.NET MVC, .NET Core, Blazor, Angular, PHP, Python, WPF, JavaScript, and Java applications.
https://forum.stimulsoft.com/

Get text column from row Reports JS

https://forum.stimulsoft.com/viewtopic.php?t=60326

Page 1 of 1

Get text column from row Reports JS

Posted: Tue Jun 07, 2022 9:34 am
by ArnauINFR
Hi, I have a question.
How can I get the text of a specific column of the row.
I want to make a condition where, when the text of the x column of the row equals to a predefined word or text.

For example, if I have 3 columns and 2 rows with data.

Columns (ID, NAME, TYPE)

Data
1 (1, P.E., ACTIVITY)
2 (2, ALEX, USER)

I want to get the text of the TYPE column of the row to be able to change the backColor of the row.

Something like:
var condition = new Stimulsoft.Report.Components.StiCondition();
condition.backColor = Stimulsoft.System.Drawing.Color.cornflowerBlue;
condition.textColor = Stimulsoft.System.Drawing.Color.black;
condition.expression = "TEXT_INFO_OF_THE_ROW == ACTIVITY";
condition.item = Stimulsoft.Report.Components.StiFilterItem.Expression;
dataText.conditions.add(condition);

dataBand.components.add(dataText);

Re: Get text column from row Reports JS

Posted: Tue Jun 07, 2022 1:23 pm
by Max Shamanov
Hello,

Please check the following code:

Code: Select all

var condition = new Stimulsoft.Report.Components.StiCondition();
            condition.backColor = Stimulsoft.System.Drawing.Color.cornflowerBlue;
            condition.textColor = Stimulsoft.System.Drawing.Color.black;
            condition.expression = 'Customers.ContactTitle == "Owner"';
            condition.item = Stimulsoft.Report.Components.StiFilterItem.Expression;

            var text = report.getComponentByName("Text3");
            text.conditions.add(condition);
Thank you.

Re: Get text column from row Reports JS

Posted: Wed Jun 08, 2022 9:51 am
by ArnauINFR
Hi Max thank you for your reply.

I'm having some problems with the answer you give me.
I'm receiving all my data from an array with json. So I don't know how exactly gets the info like you say in:

Code: Select all

condition.expression = 'Customers.ContactTitle == "Owner"';
I'm also having some problems with:

Code: Select all

var text = report.getComponentByName("Text4");
text.conditions.add(condition);
If I don't comment on it, the page crashes and nothing from the report is displayed.

I just want to color the whole row if in the column Info4 the row is "ACTIVITY"

|----------------------------------------|
| Info1 | Info2 | Info3 | Info4 |
|----------------------------------------|
| 1 | Activity1 | | ACTIVITY |
| 2 | Arnau | Smith | Charles |
| 3 | Genis | Smith | Charles |
| 4 | jordi | ba | ACTIVITY |
|----------------------------------------|

I'm attaching an example to show what I have cause I'm a beginner and I know probably I'm explaining my problem in a wrong way

Let me know if you have a problem with that code.

Re: Get text column from row Reports JS

Posted: Wed Jun 08, 2022 9:54 am
by ArnauINFR

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="icon" type="image/png" href="favicon.ico">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Taula Persones d'Activitat</title>

  <!-- Report viewer Office2013 style -->
  <link href="css/stimulsoft.viewer.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>
  <!-- Report viewer scripts, may be external -->
  <script type="text/javascript">

    var options = new Stimulsoft.Viewer.StiViewerOptions();

    // Create Viewer component.
    var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", true);

    function onLoadPage(){
      var jsonData = JSON.parse(jsonString.value);

      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("Info1", "Info1", "Info1"));
      dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Info2", "Info2", "Info2"));
      dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Info3", "Info3", "Info3"));
      dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Info4", "Info4", "Info4"));
      report.dictionary.dataSources.add(dataSource);

      var page = report.pages.getByIndex(0);

      //Create HeaderBand
      var headerBand = new Stimulsoft.Report.Components.StiHeaderBand();
      headerBand.height = 1;
      headerBand.name = "HeaderBand";
      page.components.add(headerBand);

      //Create Databand
      var dataBand = new Stimulsoft.Report.Components.StiDataBand();
      dataBand.dataSourceName = data.tableName;
      dataBand.height = 1;
      dataBand.name = "DataBand"
      page.components.add(dataBand);

      //Create texts
      var pos = 0;

      var columnWidth = Stimulsoft.Base.StiAlignValue.alignToMinGrid(page.width / data.columns.count, 4, true);

      var nameIndex = 1;

      for (var index in data.columns.list)
      {
        var dataColumn = data.columns.list[index];
        //Create text on header
        var headerText = new Stimulsoft.Report.Components.StiText();
        headerText.clientRectangle = new Stimulsoft.System.Drawing.Rectangle(pos, 1.5, columnWidth*1.5, 1);
        headerText.text = dataColumn.caption;
        headerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Center;
        headerText.vertAlignment = Stimulsoft.Base.Drawing.StiVertAlignment.Center;
        headerText.border.side = Stimulsoft.Base.Drawing.StiBorderSides.All;
        headerText.name = "HeaderText" + nameIndex.toString();
        headerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.cornflowerBlue);
        headerBand.components.add(headerText);

        //Create text on Data Band
        var dataText = new Stimulsoft.Report.Components.StiText();
        dataText.clientRectangle = new Stimulsoft.System.Drawing.Rectangle(pos, 0, columnWidth*1.5, 1);
        dataText.wordWrap = true;
        dataText.text = Stimulsoft.System.StiString.format("{{0}.{1}}", data.tableName, dataColumn.columnName);
        dataText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Center;
        dataText.vertAlignment = Stimulsoft.Base.Drawing.StiVertAlignment.Center;
        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.cornflowerBlue;
        condition.textColor = Stimulsoft.System.Drawing.Color.black;
        condition.expression = 'Table1.Info4 == "ACTIVITY"';
        condition.item = Stimulsoft.Report.Components.StiFilterItem.Expression;

        /*var text = report.getComponentByName("Text4");
        text.conditions.add(condition);*/

        dataBand.components.add(dataText);

        pos = pos + columnWidth*1.5;

        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.System.Drawing.Rectangle(0, 0, (columnWidth*1.5)*4, 0.5);
      footerText.text = "Total de Registres: {Count()}";
      footerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Right;
      footerText.vertAlignment = Stimulsoft.Base.Drawing.StiVertAlignment.Center;
      footerText.name = "FooterText";
      footerText.border.side = Stimulsoft.Base.Drawing.StiBorderSides.All;
      footerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.cornflowerBlue);
      footerBand.components.add(footerText);

      //Create text component
      var titleText = new Stimulsoft.Report.Components.StiText();
      titleText.clientRectangle = new Stimulsoft.System.Drawing.Rectangle(0, 0, 30, 1);
      titleText.wordWrap = true;
      titleText.text = "COURSE: 2022-2023";
      titleText.font = new Stimulsoft.System.Drawing.Font("Roboto-Black", 18);
      titleText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Center;
      titleText.vertAlignment = Stimulsoft.Base.Drawing.StiVertAlignment.Center;

      page.components.add(titleText);

      viewer.report = report;
    }
  </script>

</head>
<body onload="onLoadPage()">
<label for="jsonString"></label>
<textarea name="jsonString" id="jsonString" style="width: 100%; height: 100px;">
  {
  "Table1" : [[[{"Info1":"1","Info2":"Activity1","Info3":"","Info4":"ACTIVITY"},{"Info1":"2","Info2":"Arnau","Info3":"Smith","Info4":"Charles"},{"Info1":"3","Info2":"Genis","Info3":"Smith","Info4":"Charles"}],[{"Info1":"4","Info2":"jordi","Info3":"ba","Info4":"ACTIVITY"}]]]
  }
</textarea>
<div>
  <script type="text/javascript">
    // Show the report viewer in this place
    if(<?php echo $jsonString;?> == null || <?php echo $jsonString;?> == "")
    {
      var errorForm = viewer.jsObject.controls.forms.errorMessageForm || viewer.jsObject.InitializeErrorMessageForm();
      errorForm.show("No activities in this course");
    }
    else
    {
      viewer.renderHtml();
    }
  </script>
</div>
</body>
</html>

Re: Get text column from row Reports JS

Posted: Thu Jun 09, 2022 7:40 am
by Max Shamanov
Hello,

Please check attached example.

Thank you.

Re: Get text column from row Reports JS

Posted: Thu Jun 09, 2022 8:06 am
by ArnauINFR
Thank you Max that helped me a lot!
Works perfectly as I wanted.

Re: Get text column from row Reports JS

Posted: Thu Jun 09, 2022 8:09 am
by Max Shamanov
Hello,

You are welcome!
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited