Styling column headers in exported Excel file from RadGrid

7 posts, 1 answers
  1. Evan
    Evan avatar
    4 posts
    Member since:
    Mar 2020

    Posted 30 Mar Link to this post

    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!
  2. Doncho
    Admin
    Doncho avatar
    75 posts

    Posted 02 Apr Link to this post

    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:

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

    Regards,
    Doncho
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Evan
    Evan avatar
    4 posts
    Member since:
    Mar 2020

    Posted 03 Apr in reply to Doncho Link to this post

    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.

  4. Doncho
    Admin
    Doncho avatar
    75 posts

    Posted 06 Apr Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Evan
    Evan avatar
    4 posts
    Member since:
    Mar 2020

    Posted 06 Apr in reply to Doncho Link to this post

    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!

  6. Answer
    Doncho
    Admin
    Doncho avatar
    75 posts

    Posted 07 Apr Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  7. Evan
    Evan avatar
    4 posts
    Member since:
    Mar 2020

    Posted 07 Apr in reply to Doncho Link to this post

    Hi Doncho,

    Thank you very much, that was what I needed.

Back to Top