Exporting RadGrid - background color of GridBoundColumn Header

8 posts, 1 answers
  1. Joseph
    Joseph avatar
    29 posts
    Member since:
    Jun 2014

    Posted 10 Jul 2014 Link to this post

    So on the button click of a telerik:RadToolBarDropDown I export a Telerik:RadGrid to either PDF, Excel or Word, depending on what they select.
    The telerik:RadGrid has 2 levels of DetailTables.  I was able to add a background color of the MasterTableView using the code below:

    For Each hdrItem As GridHeaderItem In RadGrid1.MasterTableView.GetItems(GridItemType.Header)
                hdrItem.BackColor = System.Drawing.Color.LightBlue
                For Each cell As TableCell In hdrItem.Cells
                    cell.Style("text-align") = "left"
                Next
    Next

    My question is how can I also add a background color of each DetailTable Header?  Please Advice.  Thank You.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Jul 2014 in reply to Joseph Link to this post

    Hi Joseph,

    Please try the below approach to set the background color for the Detail Table.

    ASPX:
    ...
    <telerik:GridTableView Name="Detail2" runat="server" >
        <HeaderStyle CssClass="color2" />
    ...

    CSS:
    .color2
    {
        background-image: none !important;
        background-color: Blue !important;
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joseph
    Joseph avatar
    29 posts
    Member since:
    Jun 2014

    Posted 11 Jul 2014 in reply to Shinu Link to this post

    Shinu,

    I already have the formatting done on render.  But when i export to pdf, word, or excel, that is what i need help on.  I need to problematically apply the header background color.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Jul 2014 in reply to Joseph Link to this post

    Hi Joseph,

    Please try the below approach to change the style of detail table from code behind.

    C#:
    protected void RadGrid1_DetailTableDataBind(object source, Telerik.Web.UI.GridDetailTableDataBindEventArgs e)
    {
        GridDataItem dataItem = (GridDataItem)e.DetailTableView.ParentItem;
        switch (e.DetailTableView.Name)
        {
            case "Orders":
                {
                         ....
                    e.DetailTableView.HeaderStyle.CssClass = "color2";
                    break;
                }
        }
    }

    CSS:
    .color2
    {
        background-image: none !important;
        background-color: Blue !important;
    }

    Thanks,
    Shinu.
  6. Joseph
    Joseph avatar
    29 posts
    Member since:
    Jun 2014

    Posted 14 Jul 2014 Link to this post

    Ok i'm going to give this one more try, i thought i explained it well enough that i didn't have to go this route.

    The page is rendering well with the right color.  It is fine.
    My problem is, on a click of a button I do a RadGrid1.MasterTableView.ExportToPDF or ExportToExcel or ExporttoWord
    and this is where i am having a problem, because you cannot pass a style class.

    I did show a code above and was able to make the color of the MasterTableView header, on export to pdf, except i wasn't able to do it on the DetailTable - GridTableView header, the header is just plain white, again on export to PDF, Excel, Word.  So yeah i would like to  know how I can do that so that it will look good on PDF, Excel and/or Word once exported out - programatically 
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Jul 2014 in reply to Joseph Link to this post

    Hi Joseph,

    I apologize for misunderstanding your requirement. Please try the below c# code snippet to achieve your scenario.

    C#:
    public static int flag = 0;
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == RadGrid.ExportToPdfCommandName)
        {
            flag = 1;
        }
    }
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (flag == 1)
        {
            if (e.Item is GridHeaderItem && e.Item.OwnerTableView.Name == "Orders")
            {
                e.Item.Style["background-color"] = "Blue";
            }
        }
    }

    Let me know if you have any concern.
    Thanks,
    Shinu.
  8. Joseph
    Joseph avatar
    29 posts
    Member since:
    Jun 2014

    Posted 16 Jul 2014 in reply to Shinu Link to this post

    Hey Shinu, thank you for all your help

    Is there a way for me to get access to the RadGrid1 GridTableView so i can change the color?  The code below works to change the color of the MasterTableView header:
    Private Sub ExpandRadGrid1ForExport()
            For Each hdrItem As GridHeaderItem In RadGrid1.MasterTableView.GetItems(GridItemType.Header)
                hdrItem.BackColor = System.Drawing.Color.LightBlue
                For Each cell As TableCell In hdrItem.Cells
                    cell.Style("text-align") = "left"
                Next
            Next
            If RadGrid1.MasterTableView.HasDetailTables Then
                For Each grdTblView As GridTableView In RadGrid1.MasterTableView.DetailTables
                    grdTblView.HierarchyDefaultExpanded = True
                    If grdTblView.HasDetailTables Then
                        For Each gtv As GridTableView In grdTblView.DetailTables
                            gtv.HierarchyDefaultExpanded = True
                        Next
                    End If
                Next
            End If
        End Sub

    RadGrid1 partial code:

    <telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" ShowStatusBar="true" AutoGenerateColumns="False"
                       PageSize="20" AllowSorting="false" AllowMultiRowSelection="False" AllowPaging="False"
                       Skin="Vista">
                       <PagerStyle Mode="NumericPages"></PagerStyle>
                       <MasterTableView Width="100%" DataKeyNames="CustomerName" AllowMultiColumnSorting="True">
                           <DetailTables>
                               <telerik:GridTableView DataKeyNames="ListingName,EventName" Name="Listings" Width="100%" AllowPaging="true" PagerStyle-PageSizes="15">
                                   <DetailTables>
                                       <telerik:GridTableView Name="Events" Width="100%">
                                           <Columns>
                                               <telerik:GridBoundColumn HeaderText="City" HeaderButtonType="TextButton" DataField="ListedCity"
                                                   HeaderStyle-Width="300">
                                               </telerik:GridBoundColumn>


    I have tried the code below and that didn't work:

    For Each hdrItem2 As GridHeaderItem In RadGrid1.MasterTableView.DetailTables(0).GetItems(GridTableView)
                hdrItem2.BackColor = System.Drawing.Color.LightBlue
            Next



    Note I call ExpandRadGrid1ForExport() from PerformanceCustomer_ButtonClick which exports the RadGrid1 into PDF.
  9. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2014 in reply to Joseph Link to this post

    Hi Joseph,

    Please try the below code snippet to achieve your scenario.

    VB:
    Protected Sub rbtnExportToPDF_Click(sender As Object, e As EventArgs)
        For Each hdrItem As GridHeaderItem In RadGrid1.MasterTableView.GetItems(GridItemType.Header)
            hdrItem.BackColor = System.Drawing.Color.LightBlue
            For Each cell As TableCell In hdrItem.Cells
                cell.Style("text-align") = "left"
            Next
        Next
        For Each item As GridDataItem In RadGrid1.Items
            If item.OwnerTableView.Name = "Orders" Then
                Dim tableView As GridTableView = DirectCast(item.OwnerTableView, GridTableView)
                For Each hItem As GridHeaderItem In tableView.GetItems(GridItemType.Header)
                    hItem.BackColor = System.Drawing.Color.LightBlue
                Next
            End If
        Next
        RadGrid1.MasterTableView.ExportToPdf()
    End Sub

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