Design in the caption header of a grid on export

10 posts, 0 answers
  1. Julio
    Julio avatar
    6 posts
    Member since:
    Feb 2013

    Posted 06 Feb 2013 Link to this post

    First of all, pardon for my bad English, I'm using google translator.. =P

    I have a question, Is it possible to give a design to a Radgrid caption header when exporting to Excel
    For example, align to the left, size, bold, background-color, etc.          Not only to the MasterTableView, also the DetailTables.

    I have tried to do this from the ItemCreated event, but unfortunately I could not do this.
    Only worked for the header columns and data (GridHeaderItem, GridDataItem).

    The caption header always appears centered and without background color.

    How I can provide design to de caption header?
    -----------------------------------------------------------------------
                            Caption Header
    -----------------------------------------------------------------------
    Header1    Header2    Header3    Header4
    -----------------------------------------------------------------------
    Data1        Data2        Data3        Data4
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 07 Feb 2013 Link to this post

    Hello,


    protected void RadGrid1_GridExporting(object source, GridExportingArgs e)
       {
            
           string customHTML ="<div width=\"100%\" style=\"clear:both;text-align:center;font-size:12px;font-family:Verdana;\">" + "Caption name" + "</div>";
     
           e.ExportOutput = e.ExportOutput.Replace("<body>", String.Format("<body>{0}", customHTML));
       }
     
       protected void RadGrid1_PdfExporting(object sender, GridPdfExportingArgs e)
       {
           string customHTML = "<div width=\"100%\" style=\"clear:both;text-align:center;font-size:12px;font-family:Verdana;\">" + "Caption name" + "</div>";
     
           e.RawHTML = customHTML + e.RawHTML;
     
           string myClass = "th { text-align: left; }";
           string cssStyle = String.Format("<style type='text/css'>{0}</style>", myClass);
           e.RawHTML = e.RawHTML.Replace("<head>", "<head>" + cssStyle);
       }


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Julio
    Julio avatar
    6 posts
    Member since:
    Feb 2013

    Posted 07 Feb 2013 Link to this post

    Hi Jayesh Goyani.

    Thanks for your answer.

    Your code actually allows me to add a caption header to the MasterTableView, but not the DetailTables.

    I'm exporting the table with the option MasterTableView.HierarchyDefaultExpanded enabled.

    I need to make something like this:
    -------------------------------------------------------------------------------------------------
    Caption Header of MasterTableView  (text-align:left,Bold,etc)
    -------------------------------------------------------------------------------------------------
    Header1 Header2 Header3 Header 4
    Data1     Data2     Data3     Data4     
                             -----------------------------------------------------------------------------------------
                                 Caption header of the first DetailTable  (text-align:left,Bold,etc)
                              -----------------------------------------------------------------------------------------
                                 Header1     Header2     Header3 
                                 Data1         Data2         Data3 
                               -----------------------------------------------------------------------------------------
                                 Caption header of the secord DetailTable (text-align:left,Bold,etc)
                               -----------------------------------------------------------------------------------------
                                 Header1     Header2     Header3     Header 4          
                                 Data1         Data2          Data3      Data4      
     -----------------------------------------------------------------------------------------
    Data1     Data2     Data3     Data4    

    I need something that allows me to give desing to the caption headers of the DetailTables...   =(

    Is
    it really possible to do that?    =)

  5. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 11 Feb 2013 Link to this post

    Hello Julio,

    You can achieve the requested functionality by controlling the Caption property of GridTableView:
    <MasterTableView ... Caption="<span style='font-style:italic; color:Red;'>TEXT</span>">

    I hope this helps.

    Greetings,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Julio
    Julio avatar
    6 posts
    Member since:
    Feb 2013

    Posted 14 Feb 2013 Link to this post

    Greetings Eyup. Thanks for your answer ...

    With the code you gave me, I was able to format the header, but only the following properties:

    - font-style:italic

    - font-weight:bold

    - font-size:1.7em

    The background-color and text-align properties did not work. This is my code:

    Dim color As String = ColorTranslator.ToHtml(RadColorPicker1.SelectedColor)
     RadGrid1.MasterTableView.Caption = "<span style='font-style:italic; font-weight:bold; font-size:1.7em; text-align:left; background-color:" + color + ";'>Inventario</span>"

    This code is in the click event of a button to export.

    Is there any way to give a background color and text alignment to the caption headers?

  7. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 20 Feb 2013 Link to this post

    Hi Julio,

    I am glad that the suggested approach was helpful.

    To be able to use the text-align property, please replace the span element with div. Additionally, you can check out the following topic to alter the background-color of the exported cells:
    http://www.telerik.com/help/aspnet-ajax/grid-html-export.html

    Hope this helps.

    Regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Julio
    Julio avatar
    6 posts
    Member since:
    Feb 2013

    Posted 21 Feb 2013 Link to this post

    Hi Eyup.  Thanks again for your help...

    I put into practice your recommendation, to replace the span element with div. With this I was able to use the text-align property on the caption header.    But I could not give a background color to the caption header.

    I examine the link you gave me, and do some testing. I came to the following conclusions:

    1) With the "ExportCellFormatting" and "ItemCreated" events is not possible to give background color to the caption header.

    2) Using the "HTMLExporting", I could do the following:
     
     -  With e.Styles.Append("body { background:blue;}") I was able to give a background color to the entire stylesheet. But I just need to give background color to the header.

     - With e.Styles.Append("table { background:blue;}") I was able to give background color to the entire table, but with the exception of the caption head.

     - With e.Styles.Append("tr { background:blue !important;}") and e.Styles.Append("td { background:blue !important;}") I was able to give background color to all rows, cells and headers of each column, but with the exception of the caption header. 

    Does the "HTMLExporting"
    event is the key to all this?

    How could I give a background color to the caption header?

    Regards.

  9. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 27 Feb 2013 Link to this post

    Hi Julio,

    Please note that this behavior is due to the parsing specifications of Excel. Therefore, try the following approach:
    Caption="<div id='master' style='font-style:italic; color:DarkBlue; text-align:right; background-color:lightgreen''>Master Table</div>"
    C#:
    protected void RadGrid1_GridExporting(object sender, GridExportingArgs e)
    {
        // set the colspan to your columns count
        e.ExportOutput = e.ExportOutput.Replace("<caption class=\"rgCaption\" ><div id='master'", "<tr><td colspan=\"4\"");
        e.ExportOutput = e.ExportOutput.Replace("</div></caption>", "</td></tr>");
    }

    Hope this helps. Give it a try and let me know about the result.

    Additionally, please keep in mind that this approach is not fully tested and may cause unexpected harm to the grid structure.

    All the best,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Anamarija
    Anamarija avatar
    2 posts
    Member since:
    Mar 2014

    Posted 19 Sep 2014 in reply to Jayesh Goyani Link to this post

    What about RadTreeList ??
    e.ExportOutput doesn't contain <body>, or it does, but is compressed format ?

    e.ExportOutput = e.ExportOutput.Replace("<body>", String.Format("<body>{0}", customHTML));


  11. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 24 Sep 2014 Link to this post

    Hi Anamarija,

    Note that TreeList export format differs from RadGrid default format which is based on Html. TreeList export format is a binary type which could not be modified.

    Regards,
    Kostadin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017