New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Export with Custom Styles



LocationIDNamePopulationAreaParentID
123
Page size:
1Asia3,879,000,00043,820,000 km2 
 8China1,340,480,0009,640,011 km21
 9Japan127,380,000377,930 km21
 10India1,189,870,0003,287,263 km21
 13Thailand67,070,000513,120 km21
2Africa922,011,00030,370,000 km2 
 14Algeria33,333,2162,381,740 km22
 15Cameroon17,795,000475,442 km22
  • Configure Pdf export advanced settings
  • ItemStyle
  • AlternatingStyle
  • HeaderStyle
  • ExpandCollapseCellStyle
  • Change BackColor:Gray
    Change ForeColor:Green
    Change Font-Names:Arial
  • Change BackColor:LightGray
    Change ForeColor:DarkOliveGreen
    Change Font-Names:Arial
  • Change BackColor:DarkGray
    Change ForeColor:DarkGreen
    Change Font-Names:Arial
  • Expand/Collapse cell style:Image

This online demo demonstrates how to perform further customization of the exported Pdf file.

You can configure the export settings for the treelist through the RadTreeList.ExportSettings section. Also there is na additional sub-category Pdf dedicated to various configuration settings(ItemStyle, AlternatingItemStyle, HeaderStyle and ExpandCollapseCellStyle) for the exported .pdf document. Thus when you export RadTreeList to PDF the appearance of the Header, Item, AlternatingItem and Expand/Collapse cells in Telerik RadTreeList can be fully altered using the respective properties.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.TreeListExamplesCSharp.AdvancedExport.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container" runat="server" id="demoContainer">
        <qsf:Button ID="Button1" runat="server" Text="ExportToPdf" OnClick="Button1_Click"></qsf:Button>
        <br />
        <br />
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="LocationID" ParentDataKeyNames="ParentLocationID" AllowPaging="true" PageSize="8" AutoGenerateColumns="false">
                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                <Columns>
                    <telerik:TreeListBoundColumn DataField="LocationID" UniqueName="LocationID" HeaderText="LocationID"></telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="LocationName" UniqueName="LocationName" HeaderText="Name" HeaderStyle-Width="150px" ItemStyle-HorizontalAlign="Center"></telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="Population" DataFormatString="{0:#,#0}" UniqueName="Population" HeaderText="Population" HeaderStyle-Width="140px" ItemStyle-HorizontalAlign="Center"></telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="Area" DataFormatString="{0:#,# km<sup>2</sup>}" UniqueName="Area" HeaderText="Area" HeaderStyle-Width="100px" ItemStyle-HorizontalAlign="Center"></telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="ParentLocationID" UniqueName="ParentLocationID" HeaderText="ParentID" HeaderStyle-Width="85px" ItemStyle-HorizontalAlign="Center"></telerik:TreeListBoundColumn>
                </Columns>
                <ExportSettings ExportMode="ReplaceControls" IgnorePaging="true" OpenInNewWindow="true" Pdf-PaperSize="A3">
                </ExportSettings>
            </telerik:RadTreeList>
        </telerik:RadAjaxPanel>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>" SelectCommand="SELECT [LocationID], [LocationName], [Population], [Area], [ParentLocationID] FROM [WorldLocations]"></asp:SqlDataSource>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configure Pdf export advanced settings" Expanded="true" Height="300px">
        <Views>
            <qsf:View Title="ItemStyle">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Auto">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="ItemBackColor" runat="server" Label="Change BackColor:" Width="150px">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="Gray" />
                                    <telerik:DropDownListItem Text="Blue" />
                                    <telerik:DropDownListItem Text="Green" />
                                    <telerik:DropDownListItem Text="Purple" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList ID="ItemForeColor" runat="server" Width="150px" Label="Change ForeColor:">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="Green" />
                                    <telerik:DropDownListItem Text="DarkGray" />
                                    <telerik:DropDownListItem Text="Black" />
                                    <telerik:DropDownListItem Text="WhiteSmoke" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList ID="ItemFontName" runat="server" Width="150px" Label="Change Font-Names:">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="Arial" />
                                    <telerik:DropDownListItem Text="Verdana" />
                                    <telerik:DropDownListItem Text="Times New Roman" />
                                    <telerik:DropDownListItem Text="Helvetica" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:TextBox ID="RadTextBox1" Text="20px" Width="110px" runat="server" Label="Change LineHeigh:">
                            </qsf:TextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
        <Views>
            <qsf:View Title="AlternatingStyle">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="AltItemBackColor" runat="server" Width="150px" Label="Change BackColor:">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="LightGray" />
                                    <telerik:DropDownListItem Text="LightBlue" />
                                    <telerik:DropDownListItem Text="LightGreen" />
                                    <telerik:DropDownListItem Text="LightPurple" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList ID="AltItemForeColor" runat="server" Width="150px" Label="Change ForeColor:">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="DarkOliveGreen" />
                                    <telerik:DropDownListItem Text="Gray" />
                                    <telerik:DropDownListItem Text="Black" />
                                    <telerik:DropDownListItem Text="Wheat" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList ID="AltItemFontName" runat="server" Width="150px" Label="Change Font-Names:">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="Arial" />
                                    <telerik:DropDownListItem Text="Verdana" />
                                    <telerik:DropDownListItem Text="Times New Roman" />
                                    <telerik:DropDownListItem Text="Helvetica" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:TextBox ID="RadTextBox2" Text="20px" Width="110px" runat="server" Label="Change LineHeight:">
                            </qsf:TextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
        <Views>
            <qsf:View Title="HeaderStyle">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server">
                    <ul>
                        <li>
                            <qsf:DropDownList ID="HeaderBackColor" runat="server" Width="150px" Label="Change BackColor:">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="DarkGray" />
                                    <telerik:DropDownListItem Text="DarkBlue" />
                                    <telerik:DropDownListItem Text="DarkGreen" />
                                    <telerik:DropDownListItem Text="DarkPurple" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList ID="HeaderForeColor" runat="server" Width="150px" Label="Change ForeColor:">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="DarkGreen" />
                                    <telerik:DropDownListItem Text="LightGray" />
                                    <telerik:DropDownListItem Text="Black" />
                                    <telerik:DropDownListItem Text="White" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList ID="HeaderFontName" runat="server" Width="150px" Label="Change Font-Names:">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="Arial" />
                                    <telerik:DropDownListItem Text="Verdana" />
                                    <telerik:DropDownListItem Text="Times New Roman" />
                                    <telerik:DropDownListItem Text="Helvetica" />
                                </Items>
                            </qsf:DropDownList>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox1" runat="server" Text="Bold"></asp:CheckBox>
                            </span>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="Italic"></asp:CheckBox></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
        <Views>
            <qsf:View Title="ExpandCollapseCellStyle">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server">
                    <ul>
                        <li>
                            <qsf:DropDownList ID="RadDropDownList10" runat="server" Width="150px" Label="Expand/Collapse cell style:">
                                <Items>
                                    <telerik:DropDownListItem Selected="true" Text="Image" />
                                    <telerik:DropDownListItem Text="Text" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance