How to: Use the ASPxHtmlEditor to edit the XtraReport content directly on the web page
- 7 minutes to read
This example illustrates how to enable rich text editing when viewing web reports. To accomplish this task, the HTML content is obtained via the ASPxHtmlEditor.Html property, and then copied to the report's XRRichText using the XRRichText.LoadFile(Stream, XRRichTextStreamType.HtmlText) method. In the example, an extra ReportToolbar button is used to invoke the ASPxHtmlEditor embedded into the ASPxPopupControl.
- Default.aspx.cs
- XtraReport1.cs
- Default.aspx (C#)
- XtraReport1.vb
- Default.aspx.vb
- Default.aspx (VB.NET)
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using DevExpress.XtraRichEdit;
using System.IO;
using DevExpress.XtraPrinting;
using DevExpress.XtraReports.UI;
public partial class _Default : System.Web.UI.Page
{
const string HTMLDocumentTemplate = "<html><body>{0}</body></html>";
protected void Page_Load(object sender, EventArgs e)
{
SynchronizeReport();
}
private void SynchronizeReport() {
XtraReport1 report = new XtraReport1();
XRRichText richText = report.FindControl("richText", true) as XRRichText;
MemoryStream ms = new MemoryStream();
byte[] stringByteArray = ToByteArray(string.Format(HTMLDocumentTemplate, this.ASPxHtmlEditor1.Html));
ms.Write(stringByteArray, 0, stringByteArray.Length);
ms.Position = 0;
richText.LoadFile(ms, XRRichTextStreamType.HtmlText);
ms.Close();
this.ReportViewer1.Report = report;
this.ReportViewer1.DataBind();
}
public byte[] ToByteArray(string str) {
System.Text.ASCIIEncoding encoding = new System.Text.ASCIIEncoding();
return encoding.GetBytes(str);
}
}
using System;
using System.Drawing;
using System.Collections;
using System.ComponentModel;
using DevExpress.XtraReports.UI;
/// <summary>
/// Summary description for XtraReport1
/// </summary>
public class XtraReport1 : DevExpress.XtraReports.UI.XtraReport
{
private DevExpress.XtraReports.UI.DetailBand Detail;
private XRLabel xrLabel1;
private ReportHeaderBand ReportHeader;
private XRRichText richText;
/// <summary>
/// Required designer variable.
/// </summary>
private System.ComponentModel.IContainer components = null;
public XtraReport1()
{
InitializeComponent();
//
// TODO: Add constructor logic here
//
}
/// <summary>
/// Clean up any resources being used.
/// </summary>
/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
protected override void Dispose(bool disposing) {
if (disposing && (components != null)) {
components.Dispose();
}
base.Dispose(disposing);
}
#region Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent() {
string resourceFileName = "XtraReport1.resx";
System.Resources.ResourceManager resources = global::Resources.XtraReport1.ResourceManager;
this.Detail = new DevExpress.XtraReports.UI.DetailBand();
this.xrLabel1 = new DevExpress.XtraReports.UI.XRLabel();
this.ReportHeader = new DevExpress.XtraReports.UI.ReportHeaderBand();
this.richText = new DevExpress.XtraReports.UI.XRRichText();
((System.ComponentModel.ISupportInitialize)(this.richText)).BeginInit();
((System.ComponentModel.ISupportInitialize)(this)).BeginInit();
//
// Detail
//
this.Detail.Controls.AddRange(new DevExpress.XtraReports.UI.XRControl[] {
this.richText});
this.Detail.Name = "Detail";
this.Detail.Padding = new DevExpress.XtraPrinting.PaddingInfo(0, 0, 0, 0, 100F);
this.Detail.TextAlignment = DevExpress.XtraPrinting.TextAlignment.TopLeft;
//
// xrLabel1
//
this.xrLabel1.Font = new System.Drawing.Font("Trebuchet MS", 14.25F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(204)));
this.xrLabel1.Location = new System.Drawing.Point(17, 0);
this.xrLabel1.Name = "xrLabel1";
this.xrLabel1.Padding = new DevExpress.XtraPrinting.PaddingInfo(2, 2, 0, 0, 100F);
this.xrLabel1.Size = new System.Drawing.Size(458, 33);
this.xrLabel1.StylePriority.UseFont = false;
this.xrLabel1.Text = "Sample report document displaying HTML content";
//
// ReportHeader
//
this.ReportHeader.Controls.AddRange(new DevExpress.XtraReports.UI.XRControl[] {
this.xrLabel1});
this.ReportHeader.Height = 40;
this.ReportHeader.Name = "ReportHeader";
//
// richText
//
this.richText.Location = new System.Drawing.Point(0, 0);
this.richText.Name = "richText";
this.richText.SerializableRtfString = resources.GetString("richText.SerializableRtfString");
this.richText.Size = new System.Drawing.Size(650, 100);
//
// XtraReport1
//
this.Bands.AddRange(new DevExpress.XtraReports.UI.Band[] {
this.Detail,
this.ReportHeader});
this.Version = "9.2";
((System.ComponentModel.ISupportInitialize)(this.richText)).EndInit();
((System.ComponentModel.ISupportInitialize)(this)).EndInit();
}
#endregion
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ASPxHtmlEditor and XtraReport synchronization</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ReportToolbar ID="ReportToolbar1" runat="server" ReportViewer="<%# ReportViewer1 %>"
ShowDefaultButtons="False">
<Items>
<dx:ReportToolbarButton ItemKind="Search" />
<dx:ReportToolbarSeparator />
<dx:ReportToolbarButton ItemKind="PrintReport" />
<dx:ReportToolbarButton ItemKind="PrintPage" />
<dx:ReportToolbarSeparator />
<dx:ReportToolbarButton Enabled="False" ItemKind="FirstPage" />
<dx:ReportToolbarButton Enabled="False" ItemKind="PreviousPage" />
<dx:ReportToolbarLabel ItemKind="PageLabel" />
<dx:ReportToolbarComboBox ItemKind="PageNumber" Width="65px">
</dx:ReportToolbarComboBox>
<dx:ReportToolbarLabel ItemKind="OfLabel" />
<dx:ReportToolbarTextBox ItemKind="PageCount" />
<dx:ReportToolbarButton ItemKind="NextPage" />
<dx:ReportToolbarButton ItemKind="LastPage" />
<dx:ReportToolbarSeparator />
<dx:ReportToolbarButton ItemKind="SaveToDisk" />
<dx:ReportToolbarButton ItemKind="SaveToWindow" />
<dx:ReportToolbarComboBox ItemKind="SaveFormat" Width="70px">
<Elements>
<dx:ListElement Value="pdf" />
<dx:ListElement Value="xls" />
<dx:ListElement Value="xlsx" />
<dx:ListElement Value="rtf" />
<dx:ListElement Value="mht" />
<dx:ListElement Value="txt" />
<dx:ListElement Value="csv" />
<dx:ListElement Value="png" />
</Elements>
</dx:ReportToolbarComboBox>
<dx:ReportToolbarButton Name="ShowEditor" Text="Show HTML Editor" />
</Items>
<Styles>
<LabelStyle>
<Margins MarginLeft="3px" MarginRight="3px" />
</LabelStyle>
</Styles>
<ClientSideEvents ItemClick="function(s, e) {
if (e.item.name == 'ShowEditor')
pc.Show();}" />
</dx:ReportToolbar>
<dx:ReportViewer ID="ReportViewer1" runat="server">
</dx:ReportViewer>
<br />
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="pc"
Height="400px" CloseAction="CloseButton" Modal="True" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter">
<HeaderTemplate>
HTML editor
</HeaderTemplate>
<ContentCollection>
<dx:PopupControlContentControl runat="server">
<dx:ASPxHtmlEditor ID="ASPxHtmlEditor1" runat="server" Height="300px" Width="500px">
<SettingsImageUpload>
<ValidationSettings AllowedContentTypes="image/jpeg, image/pjpeg, image/gif, image/png, image/x-png">
</ValidationSettings>
</SettingsImageUpload>
</dx:ASPxHtmlEditor>
<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Close Editor">
<ClientSideEvents Click="function(s, e) { pc.Hide();}" />
</dx:ASPxButton>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
</div>
</form>
</body>
</html>
Imports System
Imports System.Drawing
Imports System.Collections
Imports System.ComponentModel
Imports DevExpress.XtraReports.UI
''' <summary>
''' Summary description for XtraReport1
''' </summary>
Public Class XtraReport1
Inherits DevExpress.XtraReports.UI.XtraReport
Private Detail As DevExpress.XtraReports.UI.DetailBand
Private xrLabel1 As XRLabel
Private ReportHeader As ReportHeaderBand
Private richText As XRRichText
''' <summary>
''' Required designer variable.
''' </summary>
Private components As System.ComponentModel.IContainer = Nothing
Public Sub New()
InitializeComponent()
'
' TODO: Add constructor logic here
'
End Sub
''' <summary>
''' Clean up any resources being used.
''' </summary>
''' <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
Protected Overrides Sub Dispose(ByVal disposing As Boolean)
If disposing AndAlso (components IsNot Nothing) Then
components.Dispose()
End If
MyBase.Dispose(disposing)
End Sub
#Region "Designer generated code"
''' <summary>
''' Required method for Designer support - do not modify
''' the contents of this method with the code editor.
''' </summary>
Private Sub InitializeComponent()
Dim resourceFileName As String = "XtraReport1.resx"
Dim resources As System.Resources.ResourceManager = Global.Resources.XtraReport1.ResourceManager
Me.Detail = New DevExpress.XtraReports.UI.DetailBand()
Me.xrLabel1 = New DevExpress.XtraReports.UI.XRLabel()
Me.ReportHeader = New DevExpress.XtraReports.UI.ReportHeaderBand()
Me.richText = New DevExpress.XtraReports.UI.XRRichText()
DirectCast(Me.richText, System.ComponentModel.ISupportInitialize).BeginInit()
DirectCast(Me, System.ComponentModel.ISupportInitialize).BeginInit()
'
' Detail
'
Me.Detail.Controls.AddRange(New DevExpress.XtraReports.UI.XRControl() { Me.richText})
Me.Detail.Name = "Detail"
Me.Detail.Padding = New DevExpress.XtraPrinting.PaddingInfo(0, 0, 0, 0, 100F)
Me.Detail.TextAlignment = DevExpress.XtraPrinting.TextAlignment.TopLeft
'
' xrLabel1
'
Me.xrLabel1.Font = New System.Drawing.Font("Trebuchet MS", 14.25F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, (CByte(204)))
Me.xrLabel1.Location = New System.Drawing.Point(17, 0)
Me.xrLabel1.Name = "xrLabel1"
Me.xrLabel1.Padding = New DevExpress.XtraPrinting.PaddingInfo(2, 2, 0, 0, 100F)
Me.xrLabel1.Size = New System.Drawing.Size(458, 33)
Me.xrLabel1.StylePriority.UseFont = False
Me.xrLabel1.Text = "Sample report document displaying HTML content"
'
' ReportHeader
'
Me.ReportHeader.Controls.AddRange(New DevExpress.XtraReports.UI.XRControl() { Me.xrLabel1})
Me.ReportHeader.Height = 40
Me.ReportHeader.Name = "ReportHeader"
'
' richText
'
Me.richText.Location = New System.Drawing.Point(0, 0)
Me.richText.Name = "richText"
Me.richText.SerializableRtfString = resources.GetString("richText.SerializableRtfString")
Me.richText.Size = New System.Drawing.Size(650, 100)
'
' XtraReport1
'
Me.Bands.AddRange(New DevExpress.XtraReports.UI.Band() { Me.Detail, Me.ReportHeader})
Me.Version = "9.2"
DirectCast(Me.richText, System.ComponentModel.ISupportInitialize).EndInit()
DirectCast(Me, System.ComponentModel.ISupportInitialize).EndInit()
End Sub
#End Region
End Class
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports DevExpress.XtraRichEdit
Imports System.IO
Imports DevExpress.XtraPrinting
Imports DevExpress.XtraReports.UI
Partial Public Class _Default
Inherits System.Web.UI.Page
Private Const HTMLDocumentTemplate As String = "<html><body>{0}</body></html>"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
SynchronizeReport()
End Sub
Private Sub SynchronizeReport()
Dim report As New XtraReport1()
Dim richText As XRRichText = TryCast(report.FindControl("richText", True), XRRichText)
Dim ms As New MemoryStream()
Dim stringByteArray() As Byte = ToByteArray(String.Format(HTMLDocumentTemplate, Me.ASPxHtmlEditor1.Html))
ms.Write(stringByteArray, 0, stringByteArray.Length)
ms.Position = 0
richText.LoadFile(ms, XRRichTextStreamType.HtmlText)
ms.Close()
Me.ReportViewer1.Report = report
Me.ReportViewer1.DataBind()
End Sub
Public Function ToByteArray(ByVal str As String) As Byte()
Dim encoding As New System.Text.ASCIIEncoding()
Return encoding.GetBytes(str)
End Function
End Class
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ASPxHtmlEditor and XtraReport synchronization</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ReportToolbar ID="ReportToolbar1" runat="server" ReportViewer="<%#ReportViewer1%>"
ShowDefaultButtons="False">
<Items>
<dx:ReportToolbarButton ItemKind="Search" />
<dx:ReportToolbarSeparator />
<dx:ReportToolbarButton ItemKind="PrintReport" />
<dx:ReportToolbarButton ItemKind="PrintPage" />
<dx:ReportToolbarSeparator />
<dx:ReportToolbarButton Enabled="False" ItemKind="FirstPage" />
<dx:ReportToolbarButton Enabled="False" ItemKind="PreviousPage" />
<dx:ReportToolbarLabel ItemKind="PageLabel" />
<dx:ReportToolbarComboBox ItemKind="PageNumber" Width="65px">
</dx:ReportToolbarComboBox>
<dx:ReportToolbarLabel ItemKind="OfLabel" />
<dx:ReportToolbarTextBox ItemKind="PageCount" />
<dx:ReportToolbarButton ItemKind="NextPage" />
<dx:ReportToolbarButton ItemKind="LastPage" />
<dx:ReportToolbarSeparator />
<dx:ReportToolbarButton ItemKind="SaveToDisk" />
<dx:ReportToolbarButton ItemKind="SaveToWindow" />
<dx:ReportToolbarComboBox ItemKind="SaveFormat" Width="70px">
<Elements>
<dx:ListElement Value="pdf" />
<dx:ListElement Value="xls" />
<dx:ListElement Value="xlsx" />
<dx:ListElement Value="rtf" />
<dx:ListElement Value="mht" />
<dx:ListElement Value="txt" />
<dx:ListElement Value="csv" />
<dx:ListElement Value="png" />
</Elements>
</dx:ReportToolbarComboBox>
<dx:ReportToolbarButton Name="ShowEditor" Text="Show HTML Editor" />
</Items>
<Styles>
<LabelStyle>
<Margins MarginLeft="3px" MarginRight="3px" />
</LabelStyle>
</Styles>
<ClientSideEvents ItemClick="function(s, e) {
if (e.item.name == 'ShowEditor')
pc.Show();}" />
</dx:ReportToolbar>
<dx:ReportViewer ID="ReportViewer1" runat="server">
</dx:ReportViewer>
<br />
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="pc"
Height="400px" CloseAction="CloseButton" Modal="True" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter">
<HeaderTemplate>
HTML editor
</HeaderTemplate>
<ContentCollection>
<dx:PopupControlContentControl runat="server">
<dx:ASPxHtmlEditor ID="ASPxHtmlEditor1" runat="server" Height="300px" Width="500px">
<SettingsImageUpload>
<ValidationSettings AllowedContentTypes="image/jpeg, image/pjpeg, image/gif, image/png, image/x-png">
</ValidationSettings>
</SettingsImageUpload>
</dx:ASPxHtmlEditor>
<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Close Editor">
<ClientSideEvents Click="function(s, e) { pc.Hide();}" />
</dx:ASPxButton>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
</div>
</form>
</body>
</html>