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

Export to PDF does not fill column with colors

5 Answers 153 Views

Grid

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

Krishna Samaga asked on 12 Aug 2010, 11:43 AM

image-grid.jpg

image-pdf.jpg

Hi,

I have created a telerik radgrid which contains few data columns & one column with few color combinations as shown in image-grid.jpg in attachment. When i export the grid to pdf, i get all the data columns displayed as required in exported pdf file except the column which contains colors. The column which should have displayed with colors are shown blank. Exported pdf screenshot is shown in image-pdf.jpg in the attachment.

Can anyone please help in displaying the colored column in exported pdf file?

Thanks,
Krishna Samaga B.

5 Answers, 1 is accepted

answered on 19 Aug 2010, 08:13 AM

exported-pdf.jpg

grid-image.jpg

Hi,

Below is the code Sample code block.

ASPX:

<body>

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

<asp:ScriptManager ID="_masterScriptManager" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" />

<div>

<telerik:RadGrid ID="_grid" runat="server" OnNeedDataSource="_grid_NeedDataSource" Width="700px">

<ExportSettings IgnorePaging="true" Pdf-Title="Test">

<Pdf PageTitle="Test" />

</ExportSettings>

<MasterTableView DataKeyNames="Question" AutoGenerateColumns="False">

<Columns>

<telerik:GridBoundColumn DataField="Question" HeaderText="Question" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="150px" ItemStyle-Width="150px" />

<telerik:GridBoundColumn DataField="Answers" HeaderText="Answers" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="150px" ItemStyle-Width="150px" />

<telerik:GridTemplateColumn HeaderText="Distribution" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="400px" ItemStyle-Width="400px" >

<ItemTemplate>

<%#Eval("Distribution")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<br />

<asp:Button ID="_btnExport" runat="server" Text="PDF" OnClick="_btnExport_Click" />

</div>

</form>

</body>

ASPX.CS

namespace TelerikGrid

{

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

{

protected void _grid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

List<DataClass> dataList = new List<DataClass>();

dataList.Add(new DataClass { Question = "Question1", Answers = "Answers1", Distribution = "<table border='0' cellspacing='0' cellpadding='0' width='400px'><tr><td style='width: 60%; padding:0px; background-color: #33CC00' align='center'>60</td><td style='width: 40%; padding:0px; background-color: #FF0000' align='center'>40</td></tr></table>" });

dataList.Add(new DataClass { Question = "Question2", Answers = "Answers2", Distribution = "<table border='0' cellspacing='0' cellpadding='0' width='400px'><tr><td style='width: 0%; padding:0px; background-color: Brown' align='center'>0</td><td style='width: 50%; padding:0px; background-color: Orange' align='center'>50</td><td style='width: 50%; padding:0px; background-color: Green' align='center'>50</td></tr></table>" });

dataList.Add(new DataClass { Question = "Question3", Answers = "Answers3", Distribution = "<table border='0' cellspacing='0' cellpadding='0' width='400px'><tr><td style='width: 100%; padding:0px; background-color: #FFCCFF' align='center'>100</td><td style='width: 0%; padding:0px; background-color: Brown' align='center'>0</td></tr></table>" });

_grid.DataSource = dataList;

}

protected void _btnExport_Click(object sender, EventArgs e)

{

_grid.MasterTableView.ExportToPdf();

}

public class DataClass

{

public string Question

{

get;

set;

}

public string Answers

{

get;

set;

}

public string Distribution

{

get;

set;

}

When the page is executed, the result grid shown is in the attachement for reference. I have also attached screenshot of exported PDF file in which the colored bars are not getting displayed.

Kindly help ASAP.

Thanks,
Krishna Samaga B.

Accepted

answered on 24 Aug 2010, 02:39 PM

Hello Krishna,

Thank you for the sample code!

I recommend that you modify the following lines:

protected void _grid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

List<DataClass> dataList = new List<DataClass>();

dataList.Add(new DataClass { Question = "Question1", Answers = "Answers1", Distribution =

"<table border='0' cellspacing='0' cellpadding='0' width='400px'><colgroup><col width='240px'/><col width='160px'/></colgroup><tr><td style='padding:0px; background-color: #33CC00' align='center'>60</td><td style='padding:0px; background-color: #FF0000' align='center'>40</td></tr></table>"

});

dataList.Add(new DataClass { Question = "Question2", Answers = "Answers2", Distribution =

"<table border='0' cellspacing='0' cellpadding='0' width='400px'><colgroup><col width='0px'/><col width='200px'/><col width='200px'/></colgroup><tr><td style='padding:0px; background-color: Brown' align='center'>0</td><td style='padding:0px; background-color: Orange' align='center'>50</td><td style='padding:0px; background-color: Green' align='center'>50</td></tr></table>"

});

dataList.Add(new DataClass { Question = "Question3", Answers = "Answers3", Distribution =

"<table border='0' cellspacing='0' cellpadding='0' width='400px'><colgroup><col width='400px'/><col width='0px'/></colgroup><tr><td style='padding:0px; background-color: #FFCCFF' align='center'>100</td><td style='padding:0px; background-color: Brown' align='center'>0</td></tr></table>"

});

_grid.DataSource = dataList;

}

Note the following:
- added colgroup and col elements
- all widths are in absolute units (not relative as the percentage)
- column widths are specified in the col element

PDF export

Best regards,
Daniel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 26 Aug 2010, 10:24 AM

image-2.jpg

image-1.jpg

Thanks for the answer telerik team!

Now i am able to export the grid to PDF file with colors in it as it was required. However, i have few minor issues to be resolved at the earliest.

1. The column texts in the exported PDF file does not get wrapped. i.e. If the text of a column is lengthy, then it get overlapped with next column. Attached Image-1.JPG contains overlapped column for reference. How can the column texts be wrapped while exporting to PDF file?

2. Last column in the exported PDF file gets overlapped with border of the table. Attached Image-1.JPG shows that colored column overlaps with grid border. How to resolve this overlapping issue??

3. If i try to increase width of the grid, part of the grid in exported PDF file does not get displayed. Attached Image-2 describes this issue. i.e. If the grid width is more, then right side columns or part of it does not get displayed in the PDF file. I feel this is the issue with ratio of width of grid to pdf file. How can it be resolved??

4. Also how to set the styles for the PDF file like font size, width of columns & so on???

Kindly do the needful at the earliest.

Thanks,
Krishna Samaga B.

answered on 31 Aug 2010, 03:33 PM

Hello Krishna,

1. The text will be wrapped only if there are white spaces inside

2. Please see below:

3. Try the following options:

switch the orientation to landscape
reduce the font size
use narrower fonts
decrease the page margins
increase the page size

4. This is demonstrated on our online demo:
PDF export help topic
Export to PDF online demo

Best regards,
Daniel
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Export to PDF does not fill column with colors

5 Answers, 1 is accepted