This is a migrated thread and some comments may be shown as answers.

PDF Export in HTML table, Page Break Master Detail Grid for the Selected Parent row.

1 Answer 445 Views

Grid

This is a migrated thread and some comments may be shown as answers.

gc_0620 asked on 07 Oct 2014, 05:20 PM

parentitemexpanded.png

export-to-pdf.png

Hi all,

Using VS 2010 with UI for ASP.NET AJAX Q2 2014 SP1.

My intentions are:

1) Export only Parent Grid and 2 Child Grid Rows in Each page.
2) Repeat the Parent Grid Column Header in each New Page.
3) Bottom of PDF export, show page count (i.e. 1 of n etc.).
4) If Last Page has only 1 child row, export it with Parent Grid.Below are my codes and attached is desired PDF export.

Thanks

gc_0620

_______________

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" ID="ScriptManager1" />

<div>

<telerik:RadGrid Skin="Web20" ID="RadGrid1" ShowStatusBar="True" DataSourceID="SqlDataSource1"

runat="server" AutoGenerateColumns="False" AllowPaging="True"

AllowMultiRowEdit="True" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"

AllowAutomaticUpdates="True" EnableLinqExpressions="False" AutoGenerateDeleteColumn="True"

AutoGenerateEditColumn="True" OnPdfExporting="RadGrid1_PdfExporting"

OnItemCreated="RadGrid1_ItemCreated"

onitemdatabound="RadGrid1_ItemDataBound" ResolvedRenderMode="Classic">

<ExportSettings>

<Pdf PageTitle="Rad Grid Selected Customers Export" />

</ExportSettings>

<PagerStyle Mode="NumericPages"></PagerStyle>

<MasterTableView DataSourceID="SqlDataSource1" Name="Master" DataKeyNames="CustomerID"

CommandItemDisplay="Top">

<DetailTables>

<telerik:GridTableView Name="Orders" DataKeyNames="OrderID" CommandItemDisplay="Top"

DataSourceID="SqlDataSource2" Width="100%" runat="server">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />

</ParentTableRelation>

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<Columns>

<telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"

DataField="OrderID" UniqueName="OrderID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"

DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"

DataField="Freight" UniqueName="Freight">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table id="ChildTableMain" class="form-controls" cellspacing="2" cellpadding="1"

width="99.9%" border="0" rules="none" style="border-collapse: collapse; background: #DCDCDC; border-width:0px;">

<colgroup>

<col />

</colgroup>

<tr>

<td>

<asp:Label ID="OrderDetailLabel" CssClass="form-edit_Update" runat="server" Text="Order details"

Font-Underline="True"></asp:Label>

</td>

</tr>

<tr>

<td>

<table id="ChildTableDetail" border="0" style="border-width: 0px;" class="form-controls"

width="99.9%">

<colgroup>

<col />

</colgroup>

<tr>

<td style="font-size: 11px">

Order ID:

</td>

<td>

<asp:TextBox ID="TxtOrderID" runat="server" Text='<%# Bind( "OrderID") %>' TabIndex="1" />

</td>

<td style="font-size: 11px">

Date Ordered:

</td>

<td>

<asp:TextBox ID="TxtOrderDate" runat="server" Width="200px" Text='<%# Bind( "OrderDate","{0:D}") %>'

TabIndex="2" />

</td>

</tr>

<tr>

<td style="font-size: 11px">

Freight:

</td>

<td>

<asp:TextBox ID="TxtFreight" Width="300px" runat="server" Text='<%# Bind( "Freight") %>'

TabIndex="3">

</asp:TextBox>

</td>

</tr>

</table>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

<SortExpressions>

<telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>

</SortExpressions>

</telerik:GridTableView>

</DetailTables>

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<ExpandCollapseColumn Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" DataField="CustomerID"

UniqueName="CustomerID" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="CompanyName" DataField="CompanyName"

UniqueName="CompanyName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ContactName" HeaderText="ContactName" DataField="ContactName"

UniqueName="ContactName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Address" HeaderText="Address" SortExpression="Address"

UniqueName="Address">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table id="Table2" class="form-controls" cellspacing="2" cellpadding="1" width="99.9%"

border="0" rules="none" style="border-collapse: collapse; background: #DCDCDC; border-width:0px;">

<colgroup>

<col />

</colgroup>

<tr>

<td>

<asp:Label ID="CustDetailLabel" CssClass="form-edit_Update" runat="server" Text="Customer details"

Font-Underline="True"></asp:Label>

</td>

</tr>

<tr>

<td>

<table id="TableDetail" border="0" class="form-controls" style="border-width: 0px"

width="99.9%">

<colgroup>

<col />

</colgroup>

<tr>

<td style="font-size: 11px">

Customer Id:

</td>

<td>

<asp:TextBox ID="TxtCustomer" runat="server" Text='<%# Bind( "CustomerID") %>' TabIndex="1" />

</td>

<td style="font-size: 11px">

Contact Name:

</td>

<td>

<asp:TextBox ID="TxtContact" runat="server" Width="200px" Text='<%# Bind( "ContactName") %>'

TabIndex="2" />

</td>

</tr>

<tr>

<td style="font-size: 11px">

Company:

</td>

<td>

<asp:TextBox ID="TxtCompany" Width="200px" runat="server" Text='<%# Bind( "CompanyName") %>'

TabIndex="3">

</asp:TextBox>

</td>

<td style="font-size: 11px">

Address:

</td>

<td>

<asp:TextBox ID="TxtAddress" Width="300px" runat="server" Text='<%# Bind( "Address") %>'

TabIndex="3">

</asp:TextBox>

</td>

</tr>

</table>

</td>

</tr>

<tr visible="false">

<td align="right" colspan="2">

<asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'

runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>

</asp:Button>

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"

CommandName="Cancel"></asp:Button>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="true" />

</ClientSettings>

</telerik:RadGrid>

<br />

<asp:Button ID="Button1" runat="server" Text="Export selected items with child items"

OnClick="Button1_Click" />

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address] FROM [Customers] WHERE ([CustomerID] <= @CustomerID)"

runat="server" DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID"

InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [Address]) VALUES (@CustomerID, @CompanyName, @ContactName, @Address)"

UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [Address] = @Address WHERE [CustomerID] = @CustomerID">

<DeleteParameters>

<asp:Parameter Name="CustomerID" Type="String" />

</DeleteParameters>

<SelectParameters>

<asp:Parameter DefaultValue="BLAUS" Name="CustomerID" Type="String" />

</SelectParameters>

<UpdateParameters>

<asp:Parameter Name="CompanyName" Type="String" />

<asp:Parameter Name="ContactName" Type="String" />

<asp:Parameter Name="Address" Type="String" />

<asp:Parameter Name="CustomerID" Type="String" />

</UpdateParameters>

<InsertParameters>

<asp:Parameter Name="CustomerID" Type="String" />

<asp:Parameter Name="CompanyName" Type="String" />

<asp:Parameter Name="ContactName" Type="String" />

<asp:Parameter Name="Address" Type="String" />

</InsertParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"

runat="server">

<SelectParameters>

<asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />

</SelectParameters>

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

_____________________

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using Telerik.Web.UI;

using System.Data.SqlClient;

using Telerik.Web.UI.GridExcelBuilder;

using System.Collections.Specialized;

using System.Collections;

using System.IO;

using System.Text;

using System.Globalization;

using System.Threading;

public partial class _Default : System.Web.UI.Page

{

private void Set_Export_Options()

{

//Landscape

RadGrid1.ExportSettings.Pdf.PageHeight = Unit.Parse("8.5in");

RadGrid1.ExportSettings.Pdf.PageWidth = Unit.Parse("11in");

//// 1/2 inch margins

RadGrid1.ExportSettings.Pdf.PageLeftMargin = Unit.Parse(".5in");

RadGrid1.ExportSettings.Pdf.PageRightMargin = Unit.Parse(".5in");

RadGrid1.ExportSettings.Pdf.PageTopMargin = Unit.Parse(".5in");

RadGrid1.ExportSettings.Pdf.PageBottomMargin = Unit.Parse(".5in");

RadGrid1.ExportSettings.OpenInNewWindow = true;

RadGrid1.ExportSettings.IgnorePaging = true;

RadGrid1.ExportSettings.ExportOnlyData = true;

RadGrid1.MasterTableView.HierarchyDefaultExpanded = true;

}

public void Configure_Selected_Row_Pdf_Export(GridItem item)

{

if (item.IsInEditMode)

{

item.OwnerTableView.BorderWidth = Unit.Pixel(0);

item.Style["border-width"] = "0px";

item.Style["text-align"] = "center";

item.Style["font-family"] = "Arial";

if (item.OwnerTableView.Name == "Master")

{

item.Style["background-color"] = "#555";

item.Style["color"] = "#fff";

}

else

{

item.Style["background-color"] = "#aaa";

}

bool isExport = false;

string selectedItem = "";

protected void Button1_Click(object sender, EventArgs e)

{

Set_Export_Options();

isExport = true;

selectedItem = RadGrid1.SelectedIndexes[0];

RadGrid1.MasterTableView.ExportToPdf();

}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if (isExport)

{

if (e.Item.OwnerTableView.Name == "Master" && e.Item.ItemIndexHierarchical != selectedItem)

{

e.Item.Display = false;

e.Item.Expanded = false;

}

else if (e.Item is GridDataItem || e.Item is GridHeaderItem)

{

e.Item.Edit = true;

e.Item.Display = false;

e.Item.Style.Add("display", "none");

}

protected void RadGrid1_PdfExporting(object sender, GridPdfExportingArgs e)

{

e.RawHTML = e.RawHTML.Replace("99.9%", "696px");

}

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if(isExport)

Configure_Selected_Row_Pdf_Export(e.Item);

}

1 Answer, 1 is accepted

answered on 10 Oct 2014, 11:14 AM

Hi,

You could add a page break by adding the following tag <?hard-pagebreak?> either programmatic or declarative. You could check out the Page Break section of Pdf Exporting topic for more information. Note that Pdf exporting provides an option to display a custom header and footer. If you need to display the table header on each page you have to copy the generated html in the Text property of the middle header cell. You can examine the Header and Footer section from the aforementioned help article. There could be found information about adding a page number as well. I am afraid you could not display the parent item on the last page or on any other page.

I hope this information helps.

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.