How to: Export Images from a Column of the CardViewImageColumn Type

• Jul 02, 2020
• 3 minutes to read

The following example exports images displayed in the CardViewImageColumn. To export images, handle the RenderBrick event and populate its argument ImageValue property with an image in the binary format.

Note

A complete sample project is available in the following repository: https://github.com/DevExpress-Examples/aspxcardview-how-to-export-images-from-a-column-of-the-cardviewimagecolumn-type-t333472

Default.aspx (C#)

<table>
    <tr>
        <td style="padding-right: 4px">
            <dx:ASPxButton ID="btnPdfExport" runat="server" Text="Export to PDF" OnClick="btnPdfExport_Click" />
        </td>
        <td style="padding-right: 4px">
            <dx:ASPxButton ID="btnXlsExport" runat="server" Text="Export to XLS" OnClick="btnXlsExport_Click" />
        </td>
        <td style="padding-right: 4px">
            <dx:ASPxButton ID="btnXlsxExport" runat="server" Text="Export to XLSX" OnClick="btnXlsxExport_Click" />
        </td>
        <td style="padding-right: 4px">
            <dx:ASPxButton ID="btnRtfExport" runat="server" Text="Export to RTF" OnClick="btnRtfExport_Click" />
        </td>
        <td>
            <dx:ASPxButton ID="btnCsvExport" runat="server" Text="Export to CSV" OnClick="btnCsvExport_Click" />
        </td>
    </tr>
</table>  
<dx:ASPxCardView ID="CardView1" runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1">
    <Columns>
        <dx:CardViewTextColumn Caption="Common Name" FieldName="Common_Name" VisibleIndex="0">
        </dx:CardViewTextColumn>
        <dx:CardViewTextColumn Caption="Species Name" FieldName="Species_Name" VisibleIndex="1">
        </dx:CardViewTextColumn>
        <dx:CardViewImageColumn Caption="Image" FieldName="ImagePath" VisibleIndex="2">
            <PropertiesImage ImageHeight="120px" ImageWidth="180px">
            </PropertiesImage>
        </dx:CardViewImageColumn>
    </Columns>
</dx:ASPxCardView>
<dx:ASPxCardViewExporter CardWidth="310" ID="CardViewExporter" CardViewID="CardView1" OnRenderBrick="ASPxCardViewExporter1_RenderBrick" runat="server"></dx:ASPxCardViewExporter>  
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/Fishes.xml" />

Default.aspx.cs

using DevExpress.Web;

public partial class _Default : System.Web.UI.Page
{
    protected void ASPxCardViewExporter1_RenderBrick(object sender, DevExpress.Web.ASPxCardViewExportRenderingEventArgs e)
    {
        var dataColumn = e.Column as CardViewColumn;
        if (dataColumn != null && dataColumn.FieldName == "ImagePath")
            e.ImageValue = GetImageBinaryData(e.Value.ToString());
    }
    protected void btnPdfExport_Click(object sender, EventArgs e)
    {
        CardViewExporter.WritePdfToResponse();
    }
    protected void btnXlsExport_Click(object sender, EventArgs e)
    {
        CardViewExporter.WriteXlsToResponse();
    }
    protected void btnXlsxExport_Click(object sender, EventArgs e)
    {
        CardViewExporter.WriteXlsxToResponse();
    }
    protected void btnRtfExport_Click(object sender, EventArgs e)
    {
        CardViewExporter.WriteRtfToResponse();
    }
    protected void btnCsvExport_Click(object sender, EventArgs e)
    {
        CardViewExporter.WriteCsvToResponse();
    }
    byte[] GetImageBinaryData(string relativePath)
    {
        string path = Server.MapPath(relativePath);
        return File.Exists(path) ? File.ReadAllBytes(path) : null;
    }
}

Default.aspx.vb

Imports DevExpress.Web

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub ASPxCardViewExporter1_RenderBrick(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxCardViewExportRenderingEventArgs)
        Dim dataColumn = TryCast(e.Column, CardViewColumn)
        If dataColumn IsNot Nothing AndAlso dataColumn.FieldName = "ImagePath" Then
            e.ImageValue = GetImageBinaryData(e.Value.ToString())
        End If
    End Sub
    Protected Sub btnPdfExport_Click(ByVal sender As Object, ByVal e As EventArgs)
        CardViewExporter.WritePdfToResponse()
    End Sub
    Protected Sub btnXlsExport_Click(ByVal sender As Object, ByVal e As EventArgs)
        CardViewExporter.WriteXlsToResponse()
    End Sub
    Protected Sub btnXlsxExport_Click(ByVal sender As Object, ByVal e As EventArgs)
        CardViewExporter.WriteXlsxToResponse()
    End Sub
    Protected Sub btnRtfExport_Click(ByVal sender As Object, ByVal e As EventArgs)
        CardViewExporter.WriteRtfToResponse()
    End Sub
    Protected Sub btnCsvExport_Click(ByVal sender As Object, ByVal e As EventArgs)
        CardViewExporter.WriteCsvToResponse()
    End Sub
    Private Function GetImageBinaryData(ByVal relativePath As String) As Byte()
        Dim path As String = Server.MapPath(relativePath)
        Return If(File.Exists(path), File.ReadAllBytes(path), Nothing)
    End Function
End Class

Default.aspx (VB.NET)

<table>
    <tr>
        <td style="padding-right: 4px">
            <dx:ASPxButton ID="btnPdfExport" runat="server" Text="Export to PDF" OnClick="btnPdfExport_Click" />
        </td>
        <td style="padding-right: 4px">
            <dx:ASPxButton ID="btnXlsExport" runat="server" Text="Export to XLS" OnClick="btnXlsExport_Click" />
        </td>
        <td style="padding-right: 4px">
            <dx:ASPxButton ID="btnXlsxExport" runat="server" Text="Export to XLSX" OnClick="btnXlsxExport_Click" />
        </td>
        <td style="padding-right: 4px">
            <dx:ASPxButton ID="btnRtfExport" runat="server" Text="Export to RTF" OnClick="btnRtfExport_Click" />
        </td>
        <td>
            <dx:ASPxButton ID="btnCsvExport" runat="server" Text="Export to CSV" OnClick="btnCsvExport_Click" />
        </td>
    </tr>
</table>  
<dx:ASPxCardView ID="CardView1" runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1">
    <Columns>
        <dx:CardViewTextColumn Caption="Common Name" FieldName="Common_Name" VisibleIndex="0">
        </dx:CardViewTextColumn>
        <dx:CardViewTextColumn Caption="Species Name" FieldName="Species_Name" VisibleIndex="1">
        </dx:CardViewTextColumn>
        <dx:CardViewImageColumn Caption="Image" FieldName="ImagePath" VisibleIndex="2">
            <PropertiesImage ImageHeight="120px" ImageWidth="180px">
            </PropertiesImage>
        </dx:CardViewImageColumn>
    </Columns>
</dx:ASPxCardView>
<dx:ASPxCardViewExporter CardWidth="310" ID="CardViewExporter" CardViewID="CardView1" OnRenderBrick="ASPxCardViewExporter1_RenderBrick" runat="server"></dx:ASPxCardViewExporter>  
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/Fishes.xml" />