Styling column headers in exported Excel file from RadGrid

[Evan]

I've been working with an application using a fairly old version of Telerik (2012.3.1205.40 , looks like) and I've been looking for a way to modify the style of the column headers in exported Excel files made from a RadGrid.  I've tried to attack this a number of ways, but the ExportCellFormatting event and related don't seem to cover the column headers, and attempting to manipulate the HeaderStyle of the RadGrid/the MasterTableView has also had no effect on how the exported column headers look.  I've had no problems styling the actual data fields, just the headers.  I'm sure I'm missing something very obvious to do this, but haven't found anything clear to point me at it in various searches online and looking through documentation/the API.

The function firing off the export is straightforward:

protected void lnkExportExcel_Click(object sender, EventArgs e)
{
    radgridResult.ExportSettings.ExportOnlyData = true;
    radgridResult.ExportSettings.OpenInNewWindow = true;
    radgridResult.ExportSettings.IgnorePaging = true;
...
    radgridResult.MasterTableView.ExportToExcel();
}

The omitted piece is just some wrangling of the exported file's name and shouldn't matter.

TIA!

[Doncho]

Hi Evan,

Normally setting the HeaderStyle of the MasterTableView applies to the exported file when using the export format "Html" or "Xlsx":

RadGrid1.MasterTableView.HeaderStyle.BackColor = Color.LightGray;
RadGrid1.MasterTableView.HeaderStyle.Font.Bold = true;

RadGrid1.ExportSettings.Excel.Format = GridExcelExportFormat.Xlsx;
RadGrid1.ExportSettings.Excel.Format = GridExcelExportFormat.Html;
RadGrid1.ExportSettings.IgnorePaging = true;
RadGrid1.ExportSettings.ExportOnlyData = true;
RadGrid1.ExportSettings.OpenInNewWindow = true;
RadGrid1.MasterTableView.ExportToExcel();

 

For another export format, the approach would be different:

• Styling header/footer for ExcelML format
• Styling Columns / Rows / Cells for Biff format

A forum thread about a similar issue may help you as well - RadGrid export to excel item style background color

Regards,
Doncho
Progress Telerik

[Evan]

Thanks for your reply.  I tried explictly setting the format per your suggestion but unfortunately that does not seem to change anything - the column headers were exactly the same with the changes as they were without.  Code now is:

protected void lnkExportExcel_Click(object sender, EventArgs e)
        {
            radgridResult.MasterTableView.HeaderStyle.Font.Size = FontUnit.Point(14);
            radgridResult.MasterTableView.HeaderStyle.BackColor = System.Drawing.Color.DarkGray;
            radgridResult.ExportSettings.Excel.Format = GridExcelExportFormat.Html;
            radgridResult.ExportSettings.ExportOnlyData = true;
            radgridResult.ExportSettings.OpenInNewWindow = true;
            radgridResult.ExportSettings.IgnorePaging = true;
...
            radgridResult.MasterTableView.ExportToExcel();
        }

With or without the changes, the header columns are 10pt on white background.

The linked thread seems more about the body of the data than the column headers, but it is something I noticed in my export and would not mind trying to resolve so thank you for linking it.

[Doncho]

Hi Evan,

In order to have a better overview of the case and to be able to help you solve it, We would need more information. Please provide us with the markup declaration of the RadGrid and clarify which is the export format you want to use.

Looking forward to hearing from you.

Kind regards,
Doncho
Progress Telerik

[Evan]

Hi Doncho,

The version of Telerik we are using is old enough that it does not seem to have .xlsx for an option so we'll be going with html for the export format.

The RadGrid is declared as follows:

<telerik:RadGrid ID="radgridResult" runat="server" AutoGenerateColumns="true" EnableEmbeddedSkins="False" CellSpacing="0" GridLines="Both" AllowSorting="true" AllowPaging="true" Height="735px" Width="100%"
    ShowFooter="true" Skin="T2FS" EnableHeaderContextMenu="True" OnNeedDataSource="radgridResult_NeedDataSource" OnPageSizeChanged="radgridResult_PageSizeChanged" PageSize="15" OnExportCellFormatting="radgridResult_ExportCellFormatting">
    <HeaderContextMenu EnableEmbeddedSkins="False"></HeaderContextMenu>
    <ClientSettings Scrolling-AllowScroll="true"></ClientSettings>
    <PagerStyle Mode="NextPrevNumericAndAdvanced" />
</telerik:RadGrid>

Not sure if it's relevant, but just in case - the columns that will appear in the grid are extremely variable as this is the output for a reporting tool where the user can select what columns from the database tables involved are displayed.

 

Let me know if you need anything else, thanks again!

[Doncho]

Hi Evan,

You can try to add a CSS class to the header cells in the ItemsCreated event and append the desired styling in the HtmlExporting event of the RadGrid.

Here is a sample for you to try:

protected void RadButton1_Click(object sender, EventArgs e)
{
    RadGrid1.ExportSettings.Excel.Format = GridExcelExportFormat.Html;
    RadGrid1.ExportSettings.IgnorePaging = true;
    RadGrid1.ExportSettings.ExportOnlyData = true;
    RadGrid1.ExportSettings.OpenInNewWindow = true;
    RadGrid1.MasterTableView.ExportToExcel();
}

 

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        var headerCells = e.Item.Cells;
        for (int i = 2; i < headerCells.Count; i++)
        {
            headerCells[i].CssClass = "headerCell";
        }
    }
}

protected void RadGrid1_HtmlExporting(object sender, GridHTMLExportingEventArgs e)
{
    e.Styles.Append("@page table .headerCell { background-color: #d3d3d3; }");
}

You could also check out the approach for exporting HTML in Grid - Export to Excel demo.

I hope that will help

Kind regards,
Doncho
Progress Telerik

[Evan]

Hi Doncho,

Thank you very much, that was what I needed.