Load and Save Report in the DesignerFx

This sample project demonstrates how you can load report template to the Flash designer and save it after editing. Also this example shows how to register data for the report to preview it.

First we need place the Flash designer component on the ASPX page and define the necessary event hanlders: OnSaveReport for save the report template and OnPreviewReport for register the preview data. Also create a table and web controls which allow to load report in the several ways.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="Load_and_Save_Report_in_the_DesignerFx.Default" %>
<%@ Register assembly="Stimulsoft.Report.WebDesign" namespace="Stimulsoft.Report.Web" tagprefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Load and Save Report in the DesignerFx</title>
<style type="text/css">
.style1 {
width: 80px;
text-align: center;
}
.style2 {
width: 260px;
vertical-align: top;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:StiWebDesignerFx ID="StiWebDesignerFx1" runat="server" visible="false"
OnSaveReport="StiWebDesignerFx1_SaveReport"
OnPreviewReport="StiWebDesignerFx1_PreviewReport" />
<table>
<tr>
<td class="style2">
<asp:Label ID="Label1" runat="server" Font-Names="Arial" Font-Size="11pt"
Text='1. Choose ".mrt" file'></asp:Label><br />
<asp:Label ID="Label2" runat="server" Font-Names="Arial" Font-Size="11pt"
Text='2. Click "Design" button'></asp:Label><br />
<br />
<asp:FileUpload ID="FileReport" runat="server" Font-Names="Arial" Font-Size="11pt" Width="264px" />
<br />
<br />
<asp:Button ID="ButtonDesignFile" runat="server" Text="Design" Width="141px"
OnClick="ButtonDesignFile_Click" />
<br />
</td>

<td class="style1"><b>or</b></td>

<td class="style2">
<asp:Label ID="Label3" runat="server" Font-Names="Arial" Font-Size="11pt"
Text='1. Choose Report on server'></asp:Label><br />
<asp:Label ID="Label4" runat="server" Font-Names="Arial" Font-Size="11pt"
Text='2. Click "Design" button'></asp:Label><br />
<br />
<asp:DropDownList ID="DropDownListReport" runat="server" Width="250px">
<asp:ListItem Value="SimpleList.mrt"></asp:ListItem>
<asp:ListItem Value="TwoSimpleLists.mrt"></asp:ListItem>
<asp:ListItem Value="Invoice.mrt"></asp:ListItem>
<asp:ListItem Value="Shapes.mrt"></asp:ListItem>
</asp:DropDownList>
<br />
<br />
<asp:Button ID="ButtonDesignServer" runat="server" Text="Design" Width="141px"
onclick="ButtonDesignServer_Click" />
<br />
<td class="style1"><b>or</b></td>

<td class="style2">
<br />
<br />
<br />
<asp:Button ID="ButtonDesignNew" runat="server" Text="Design New Report"
Width="157px" onclick="ButtonDesignNew_Click" />
</td>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>


In the next step create the button three click handlers for load the report template in several ways. The ButtonDesignFile_Click method loads the report from local computer, the ButtonDesignServer_Click method loads the selecter report from the list, and the ButtonDesignNew_Click method creates the new report template.

protected void ButtonDesignFile_Click(object sender, EventArgs e)
{
if (FileReport.PostedFile != null && FileReport.PostedFile.FileName.Length > 0 &&
FileReport.PostedFile.InputStream != null)
{
StiReport report = new StiReport();
report.Load(FileReport.PostedFile.InputStream);
StiWebDesignerFx1.Design(report);
}
}

protected void ButtonDesignServer_Click(object sender, EventArgs e)
{
if (DropDownListReport.Text != null && DropDownListReport.Text.Length > 0)
{
string applicationDirectory = HttpContext.Current.Server.MapPath(string.Empty);
string reportFileName = applicationDirectory + "\\Reports\\" + DropDownListReport.Text;

StiReport report = new StiReport();
report.Load(reportFileName);
StiWebDesignerFx1.Design(report);
}
}

protected void ButtonDesignNew_Click(object sender, EventArgs e)
{
StiReport report = new StiReport();
StiWebDesignerFx1.Design(report);
}


The StiWebDesignerFx1_SaveReport method invoked by clicking the Save button in the Flash designer. In the arguments of this method the report template object will be passed. You can save this report template to file, to database as packed string or use other way for saving. Also you can set the error code or the string message that will be displayed in the designer after saving the report.

protected void StiWebDesignerFx1_SaveReport(object sender, StiSaveReportEventArgs e)
{
// Web Designer return StiReport object in the e.Report property
var reportString = e.Report.SaveToString();

// You can set the error code which will be displayed by the designer after saving
// -1: default value, the message is not displayed
// 0: display 'Report is successfully saved' message
//e.ErrorCode = 1;

// Also you can set the custom message, it will be displayed after saving
e.ErrorString = "Your report has been saved.";
}


If you need to register some data for report preview, you should define the StiWebDesignerFx1_PreviewReport method. In this method you can load and register the necessary data set, for example load the XML data for the sample reports.

protected void StiWebDesignerFx1_PreviewReport(object sender, StiReportDataEventArgs e)
{
string applicationDirectory = HttpContext.Current.Server.MapPath(string.Empty);

DataSet data = new DataSet();
data.ReadXml(applicationDirectory + "\\Data\\Demo.xml");
data.ReadXmlSchema(applicationDirectory + "\\Data\\Demo.xsd");

e.Report.RegData(data);
}


In the screenshot below you can see the result of the sample code.

Load and Save Report in the DesignerFx