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

Printing

Note that for IE, the browser’s popups should be enabled in order for the print functionality to work properly.
NameTitleCompany NameCustomer Location 
Page size:
 7 items in 2 pages
     
     
     
     
     
     

This RadGrid demo demonstrates the new printing functionality of RadGrid, introduced in R2 2016. This new feature generates a PDF document and sends it to the browser for printing, which allows the control to preserve its appearance (including built-in skins and custom styles). You can add the print button by setting the ShowPrintButton property to "true", which will render it in the command item.

For demo purposes only and to demonstrate that even the selected styles are included in the generated PDF file for the printing, within the client-side OnGridCreated event we are preselecting few items.

  • DefaultCS.aspx
  • CustomersWebService.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#"  %>

<%@ 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>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        Note that for IE, the browser�s popups should be enabled in order for the print functionality to work properly.
    </qsf:MessageBox>
    <div class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="false" ExportSettings-IgnorePaging="true" AllowPaging="true" PageSize="6" 
            AllowMultiRowSelection="true" ClientSettings-EnableClientPrint="true">            
            <ClientSettings EnableRowHoverStyle="true">
                <DataBinding Location="CustomersWebService.svc" SelectMethod="GetCustomers">
                </DataBinding>
                <Selecting AllowRowSelect="true"></Selecting>
                <ClientEvents OnGridCreated="demo.onGridCreated" />
            </ClientSettings>
            <PagerStyle EnableAllOptionInPagerComboBox="true" AlwaysVisible="true"/>
            <MasterTableView ClientDataKeyNames="CustomerID" TableLayout="Fixed" CommandItemDisplay="Top">                
                <CommandItemSettings ShowRefreshButton="false" ShowAddNewRecordButton="false" ShowPrintButton="true" />
                <Columns>
                    <telerik:GridBoundColumn DataField="ContactName" UniqueName="ContactName" HeaderText="Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="TitleClientTemplateColumn" HeaderText="Title">
                        <ClientItemTemplate>
                            <span>#=ContactTitle #</span>
                        </ClientItemTemplate>
                    </telerik:GridTemplateColumn>
                   
                    <telerik:GridBoundColumn DataField="CompanyName" UniqueName="CompanyName" HeaderText="Company Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="MapClientTemplateColumn" HeaderText="Customer Location">
                        <ClientItemTemplate>
                            <a href="#= String.format("http://maps.google.com/maps?q={0}, {1}", Address, City) #" target="_blank">Find address of <em>#=ContactName#</em></a>
                        </ClientItemTemplate>
                    </telerik:GridTemplateColumn>
                     <telerik:GridTemplateColumn UniqueName="InfoClientTemplateColumn"  HeaderStyle-Width="120px">
                        <ClientItemTemplate>
                            <div class="imageWrapper">
                                <div><img id="customerPhoto" width="50" src="ImageHandler.ashx?custID=#=CustomerID#" alt="#=ContactName#" /></div>
                            </div>
                        </ClientItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance