This example shows how to use the report designer events. Some designer actions have events to which you can subscribe. For example, save report, create new report, preview report, exit from the designer:
// Set the full screen mode for the designer
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;

// Create the report designer with specified options
var designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);

// Assign the onSaveReport event function
designer.onSaveReport = function (e) {
	var jsonStr =;
	alert("Save to JSON string complete.")

// Assign the onCreateReport event function
designer.onCreateReport = function (e) {
	var ds = new Stimulsoft.System.Data.DataSet("Demo");
	ds.readJsonFile("../reports/Demo.json");"Demo", "Demo", ds);

// Assign the onPreviewReport event function
designer.onPreviewReport = function (e) {
	switch (e.format) {
		case Stimulsoft.Report.StiExportFormat.Html:
			e.settings.zoom = 2; // Set HTML zoom factor to 200%

// Assign the onExit event function
designer.onExit = function (e) {


// Create a new report instance
var report = new Stimulsoft.Report.StiReport();
// Load report from url
// Edit report template in the designer = report;

// Show the report designer in the 'content' element

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

Designer Events