This example shows how to create and print data table from JavaScript code. As input, define a text area with JSON data and allow to change this data:
<textarea name="jsonString" id="jsonString" style="width: 440px; height: 200px;">
{
	"Table1" : [{
		"Column1" : "1",
		"Column2" : "One"
	}, {
		"Column1" : "2",
		"Column2" : "Two"
	}, {
		"Column1" : "3",
		"Column2" : "Three"
	}]
}
</textarea><br />
<input type="submit" value="Show" onclick="onShowClick()" />

On the button click event onShowClick() create a report and all of its components with code. First, create a new report and prepare data for it:
function onShowClick() {
	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("Column1", "Column1", "Column1"));
	dataSource.columns.add(new Stimulsoft.Report.Dictionary.StiDataColumn("Column2", "Column2", "Column2"));
	report.dictionary.dataSources.add(dataSource);

...

Next, add a Header Band and Data Band to the report:
...

	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);

...

Next, place Text Boxes with titles of data on the Header Band, and Text Boxes with reference to data source fields on the Data Band:
...

	// Create texts
	var pos = 0;
	var columnWidth = Stimulsoft.Base.StiAlignValue.alignToMinGrid(page.width / data.columns.count, 0.1, 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.Base.Drawing.RectangleD(pos, 0, columnWidth, 0.5);
		headerText.text = dataColumn.caption;
		headerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Center;
		headerText.name = "HeaderText" + nameIndex.toString();
		headerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.lightGreen);
		headerText.border.side = Stimulsoft.Base.Drawing.StiBorderSides.All;
		headerBand.components.add(headerText);
		
		// 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 = 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.cornflowerBlue;
		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++;
	}

...

Then, add the Footer Band with the Text Box to the report for showing the Total value:
...

	// 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.lightGreen);
	footerBand.components.add(footerText);

...

In the end, assign the report and show it in the viewer:
...

	viewer.report = report;
};

Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen:

Printing the Table from Code

By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.