We Keep Coding

Print rich text string with all effect and styles in pdf using iTextSharp

I am trying to print rich text content in pdf using itextSharp library with version 5.5.8.0. But I am I am printing that rich text, it will print only normal string without any style effect or html tags.
Here is my web view that contain rich text
But while printing in pdf using iTexhSharp, it will print like rich text but each html element it will start printing with new line, as like below image
Here is the code, that I am using to print rich text in pdf:
ElementList elements = XMLWorkerHelper.ParseToElementList(descriptionData, "");
PdfPCell cell = new PdfPCell();
foreach(var ele in elements) {
cellDescriptionData.AddElement(ele);
}
tableThirdBlock.AddCell(cellDescriptionData);
Here the "descriptionData" field will contain the html string.
I want to be print the same in pdf as available in web view.
Here is the actual HTML string, which is generated dynamically. So the html string will be dynamic with dynamic css and text.
" <b style="font-family: Arial, Verdana; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; color: rgb(204, 255, 255); background-color: rgb(51, 102, 255);">zzz </b><div style="font-family: Arial, Verdana; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;"><b style="color: rgb(204, 255, 255); background-color: rgb(51, 102, 255);"><br /></b></div><div><b style="font-family: Arial, Verdana; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; color: rgb(204, 255, 255); background-color: rgb(51, 102, 255);">Test </b> <span style="color: rgb(255, 0, 0);"> <span style="font-weight: bold;">Description</span> </span><span style="color: rgb(153, 51, 153); font-style: italic;">Other Color</span></div> ".
Is anything wrong, that I am missing ?
Please help me to print rich text with all effect and styles in pdf.
Thanks

I your comment, you are asking for an example on how to use XML Worker to parse HTML to a list of Element objects. Such an example can be found on the official iText web site in the answers to question such as:
How to adjust the page height to the content height? 1
How to convert Arabic HTML to PDF? 2
In 1, you'll discover that you can parse an HTML and CSS file to an ElementList object:
ElementList elements = XMLWorkerHelper.parseToElementList(HTML, CSS);
In 2, you'll learn how to add the elements in an ElementList to a PdfPCell:
PdfPTable table = new PdfPTable(1);
PdfPCell cell = new PdfPCell();
for (Element e : elements) {
cell.addElement(e);
}
table.addCell(cell);
document.add(table);
Note that I simplified the examples from the original questions. You don't need RTL because your text probably isn't Arabic. You can probably use the convenience method parseToElementList() instead of using the full code that was used in 2.
I have created a proof of concept that results in the file test-herin.pdf:
The HTML to get this result looks like this:
<div><span class="bluetextwhitebackground">zzz</span></div>
<div>
<span class="bluetextwhitebackground">Test</span>
<span class="redtext">Description</span>
<span class="italicpurple">Other Color</span>
</div>
The CSS to get the desired styles looks like this:
.bluetextwhitebackground
{ font-family: times; color: white; background: blue}
.redtext
{ font-family: times; color: red; }
.italicpurple
{ font-family: times; font-style: italic; color: purple }
As you can see, I used <div> when I want a block of text that causes a new line after the text is rendered. I used <span> in cases where I don't want a new line to appear.
It is hard to answer your question because you don't show your HTML. New lines are triggered when using <p> or <div> tags, or by defining something as a div in the CSS.
By the way, the code to generate the PDF can be found here: ParseHtml13
Update:
After you shared the HTML, I created another proof of concept:
The resulting PDF file is test-herin2.pdf and it looks like this:
This looks exactly the way I expect it. In other words: I can't reproduce the problem you're describing. If I can't reproduce a problem, I can't fix it.

I want to get the ID of label using C# which is being created by jQuery on RunTime

First I will explain my scenario.
I have asp.net menu (dynamically created menu) and now I want to place push notification just like Facebook on my each menu option. I have designed it using CSS and put a label using jQuery.
if (res == "MenuIcons") {
$(this.parentElement).addClass('Notification');
var $label = $("<label ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
$(this.parentElement.parentElement).append($label);
i++;
}
But I am totally confused that how to handle it using C# because I am unable to get the ID of the label created on run-time.
If you didn't understand please let me know and I will explain it more.

why don't you set a data attribute to each label, something like
var $label = $("<label data-element-type='notification' ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
and then you can retrieve the whole collection with jQuery:
$("[data-element-type='notification']").each(function(){...});

Try adding runat="server" attribute in your label tag. You label tag id won't be available until runtime. So what you can do is search for the controllers by the id of your label. In code behind you can do as following
foreach(Contol c in this.Controls)
{
if(c.ID.contains("notificationlbl")
{
//your code
}
}

Dynamic text underlined by braces

I want to underline a word with a round brace. This should be part of a C# Text but if it is easier in CSS, no problem. My problem is that the length of the Word can vary, so the bow must by calculated for each word.
My first idea was using CSS box-shadow:
CSS:
#test {
font-size: 50px;
background: transparent;
border-radius: 70px;
height: 65px;
width: 90px;
box-shadow: 0px 6px 0px -2px #00F;
font-family: sans-serif;
}
HTML:
<div id="test">Hey</div>
Unfortunately due to the dynamic Text sizes I can't calculate them.
Is there a smarter approach to this problem?

You don't need to calculate the width if you use span tags instead.
CSS:
.test {
font-size: 50px;
background: transparent;
border-radius: 70px;
height: 65px;
box-shadow: 0px 6px 0px -2px #00F;
font-family: sans-serif;
}
HTML:
<span id="test" class="test">Hey</span><br/>
<span class="test">Hey this is longer</span>
Working Fiddle: http://jsfiddle.net/Ge8Q3/

I found a different approach.
Working fiddle: http://jsfiddle.net/6pEQA/1/
I used javascript and made the width dynamic:
textWidth function taken from here.
$.fn.textWidth = function(){
var self = $(this),
children = self.contents(),
calculator = $('<span style="white-space:nowrap;" />'),
width;
children.wrap(calculator);
width = children.parent().width(); // parent = the calculator wrapper
children.unwrap();
return width;
};
$(document).ready(function(){
$('#test').css('width',$('#test').textWidth());
});
It also works with h1, div or span. You can check my fiddle. Because it is using span elements to calculate width of the element.

TextBoxWatermarkExtender losing text after Response.Write

I am exporting an asp.net gridview to an excel sheet by Response.Write(*stringBuilder*), but when the button is clicked TextBoxesare losing TextBoxWatermarkExtender Text. Any idea? Thanks.

There is a problem in your CSS...
Work Like This..
.yourWatermarkedClass
{
color: Black;
font-family: Arial;
font-size: 11px;
border: solid 1px #a9a9a9;
text-indent:2px;
vertical-align:middle;
text-align:right;
background-image:url(../images/yourfileName.png);
background-repeat:no-repeat;
}

Expanding gridview's row

One of gridview's column is a "Content" column that can have few lines of text (it can be literal, textbox or label ).
In "default" mode i want it to show only the first line and a link button: "(more)" or "(read)".
Clicking on this link should expand the column and display full content.
What is the best way to do this?

Selecting first 10 characters of content text and using it as your link's text is better aproach. This will reduce size of data that retrieved from database like that :
SELECT ContentId, SUBSTRING(Content, 0, 10) AS Content
FROM ContentTable;
Then you can use template column for this column that includes a label and a link. Lbel for the description text, link for the details.
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label
Text='<%# Eval("Content") %>'
runat="server"/>
<a href='<%# Eval("ContentId", "contentdetails.aspx?id={0}") %>'>More</a>
</ItemTemplate>
</asp:TemplateColumn>

This will help you.
http://www.asp.net/community/control-gallery/Item.aspx?i=1465

try this. http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx

Use the power of CSS!
Place this inside your gridview row. It will naturally push out the row to the height of your content, or the amount of rows required.
<div class="toggle">
<div class="toggle-header">
Toggle!
</div>
<div class="toggle-height">
<div class="toggle-transform">
<p>2nd line of text</p>
<p>3rd line</p>
<p>4th line</p>
<p>etc</p>
</div>
</div>
</div>
And use this CSS...
body {
font-family: sans-serif;
}
.toggle {
position: relative;
border: 2px solid #333;
border-radius: 3px;
margin: 5px;
width: 200px;
}
.toggle-header {
margin: 0;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
cursor: pointer;
}
.toggle-height {
background-color: tomato;
overflow: hidden;
transition: max-height .6s ease;
max-height: 0;
}
.toggle:hover .toggle-height {
max-height: 1000px;
}
.toggle-transform {
padding: 5px;
color: white;
transition: transform .4s ease;
transform: translateY(-100%);
}
.toggle:hover .toggle-transform {
transform: translateY(0);
}
You may want to disguise the "toggle" with a textbox of your "(more)" line to expand the rest.
Let us know if it worked.