RadGrid Export to Pdf & Excel Image Header

1 posts, 0 answers
  1. Attila Antal
    Admin
    Attila Antal avatar
    72 posts

    Posted 12 Mar Link to this post

     

    Requirements

    Telerik Product and Version

    3.5+

    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    ASP.NET, C#.NET, VB.NET


    PROJECT DESCRIPTION 
    Code Library sample that demonstrates Exporting RadGrid with an Image as Header for both PDF and Excel.

    Export to PDF Image Header Export to Excel Image Header

    Export Image as Header for PDF
    Did you know that the CommandItemTemplate of RadGrid can also be exported if the ExportSettings-ExportOnlyData property is set to False, and that it can be used to build a header for the exported files? Since setting Headers/Footers for the exported document is limited, this could be a viable workaround to export your company logo, banner as header.

    This sample is using the approach from the Grid - Export to PDF demo except that it spans the header until the edges without margin/padding.

    Settings for the PDF Page (I've defined the properties in the markup, but it can be set in the code behind as well)

    <ExportSettings>
        <Pdf PageTopMargin="-2" PageLeftMargin="-1" PageRightMargin="-1" PageWidth="200mm"></Pdf>
    </ExportSettings>

     Markup - CommandItemTemplate containing an Image
    <CommandItemTemplate>
        <asp:Image ID="Image1" runat="server" ImageUrl="Img/cropped_banner.jpg"></asp:Image>
    </CommandItemTemplate>

    Markup - Of course, the CommandItem does not have to be visible at all times, you can use the following approach to only show it during the export event.
    <MasterTableView ... CommandItemDisplay='<%# (RadGrid1.IsExporting) ? GridCommandItemDisplay.Top : GridCommandItemDisplay.None %>'>

    C# - Finally, the code behind that will span the image over the CommandItem cells.
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (RadGrid1.IsExporting && e.Item is GridCommandItem)
        {
            e.Item.PrepareItemStyle();  //needed to span the image over the CommandItem cells
        }
    }

    C# - It is now ready to be exported (the sample uses a button, but it's not limited to)
    protected void RadButton1_Click(object sender, EventArgs e)
    {
        RadGrid1.ExportToPdf();
    }


    Export Image as Header for Excel
    For excel, we will change the approach a little bit, and we'll follow the Image Support section of the Export Infrastructure article to add the image.

    Markup - Set the Excel Format to Biff.
    <ExportSettings>
        <Excel Format="Biff" /> // works with Biff and Xlsx formats
    </ExportSettings>

    C# - Image applied inside the InfrastructureExporting event handler
    protected void RadGrid1_InfrastructureExporting(object sender, GridInfrastructureExportingEventArgs e)
    {
        var table = e.ExportStructure.Tables[0]; // get a reference to the export structure of RadGrid
        table.Rows[1].Height = 132; // Apply height to the first row
        table.InsertImage(table.Cells[1, 1], "Img/small_banner.jpg"); // Inserts the image to the first cell in the first row
    }

    C# - To apply additional style to RadGrid before it gets exported, you can do that in the PreRender event handler
    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        if (RadGrid1.IsExporting)
        {
            foreach (GridDataItem item in RadGrid1.Items)
            {
                item.Height = Unit.Pixel(66); // we'll apply some height to DataItems as we're exporting some pictures and we want them to fit the cell in the excel file
            }
        }
    }

    And then export.
    protected void RadButton2_Click(object sender, EventArgs e)
    {
        RadGrid1.ExportToExcel();
    }


Back to Top