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

Export RadGrid

Drag a column header and drop it here to group by that column
 First NameLast NameTitleBirth DateCityCountry
NancyDavolioSales Representative12/08/1948SeattleUSA
 
Customer Image
Country: USA
City: Seattle
Address: 507 - 20th Ave. E. Apt. 2A
HomePhone: (206) 555-9857
AndrewFullerVice President, Sales02/19/1952TacomaUSA
JanetLeverlingSales Representative08/30/1963KirklandUSA
MargaretPeacockSales Representative09/19/1937RedmondUSA
StevenBuchananSales Manager03/04/1955LondonUK
MichaelSuyamaSales Representative07/02/1963LondonUK
RobertKingSales Representative05/29/1960LondonUK
LauraCallahanInside Sales Coordinator01/09/1958SeattleUSA
AnneDodsworthSales Representative01/27/1966LondonUK

You could easily export the RadGrid control with the RadClientExportManager to PDF (as shown in the demo) and to an image. You can also use the skin chooser to change the appearance of the component and export the new appearance.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ClientExportManager.ApplicationScenarios.PivotGrid.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <!-- Load Pako ZLIB library to enable PDF compression -->
    <script src="../../../Common/Scripts/pako.min.js"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadClientExportManager ID="RadClientExportManager1" runat="server"></telerik:RadClientExportManager>
        <telerik:RadButton RenderMode="Lightweight" ID="ExportButton" Text="Export RadGrid to PDF" CssClass="exportButton" runat="server" OnClientClicked="exportRadPivotGrid" AutoPostBack="false"></telerik:RadButton>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" OnPreRender="RadGrid1_PreRender" DataSourceID="SqlDataSource1"
            runat="server" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"
            GridLines="None" ShowGroupPanel="true" OnItemCreated="RadGrid1_ItemCreated"
            OnItemCommand="RadGrid1_ItemCommand">
            <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID" AllowMultiColumnSorting="True"
                GroupLoadMode="Server">
                <NestedViewTemplate>
                    <asp:Panel runat="server" ID="InnerContainer">
                        <asp:Label ID="Label1" Font-Bold="true" Font-Italic="true" Text='<%# Eval("EmployeeID") %>'
                            Visible="false" runat="server"></asp:Label>
                        <telerik:RadListView runat="server" ID="RadListView" DataSourceID="SqlDataSource4" ItemPlaceholderID="CustomersContainer"
                            OnPreRender="RadListView_PreRender">
                            <LayoutTemplate>
                                <div class="contactWrap RadListView RadListView_<%# Container.Skin %>">
                                    <asp:PlaceHolder ID="CustomersContainer" runat="server"></asp:PlaceHolder>
                                </div>
                            </LayoutTemplate>
                            <ItemTemplate>
                                <div class="template">
                                    <img src='<%# Page.ResolveUrl("~/Grid/Examples/Hierarchy/Hierarchy-with-templates/Img/") + Eval("EmployeeID")  %>.jpg'
                                        alt="Customer Image" />
                                    <table cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td class="title">Country:</td>
                                            <td><%# Eval("Country") %></td>
                                        </tr>
                                        <tr>
                                            <td class="title">City:</td>
                                            <td><%# Eval("City") %></td>
                                        </tr>
                                        <tr>
                                            <td class="title">Address:</td>
                                            <td><%# Eval("Address") %></td>
                                        </tr>
                                        <tr>
                                            <td class="title">HomePhone:</td>
                                            <td><%# Eval("HomePhone") %></td>
                                        </tr>
                                    </table>
                                </div>
                            </ItemTemplate>
                        </telerik:RadListView>
                        <asp:SqlDataSource ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                            ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, Country, City, Address, HomePhone FROM Employees Where EmployeeID = @EmployeeID"
                            runat="server">
                            <SelectParameters>
                                <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="EmployeeID"></asp:ControlParameter>
                            </SelectParameters>
                        </asp:SqlDataSource>
                    </asp:Panel>
                </NestedViewTemplate>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="FirstName" HeaderText="First Name" HeaderButtonType="TextButton"
                        DataField="FirstName" UniqueName="FirstName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="LastName" HeaderText="Last Name" HeaderButtonType="TextButton"
                        DataField="LastName" UniqueName="LastName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="Title" HeaderText="Title" HeaderButtonType="TextButton"
                        DataField="Title" UniqueName="Title">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="BirthDate" DataFormatString="{0:MM/dd/yyyy}"
                        HeaderText="Birth Date" HeaderButtonType="TextButton" DataField="BirthDate" UniqueName="BirthDate">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="City" HeaderText="City" HeaderButtonType="TextButton"
                        DataField="City" UniqueName="City">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="Country" HeaderText="Country" HeaderButtonType="TextButton"
                        DataField="Country" UniqueName="Country">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowDragToGroup="true">
                <Scrolling AllowScroll="true" ScrollHeight="" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Employees"
        runat="server"></asp:SqlDataSource>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            var $ = $telerik.$;

            function exportRadPivotGrid(sender, args) {
                $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadGrid"));
            }

        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance