Develop Reference

Rotativa 1.7.4 ActionAsPDF, Remove Navbar and Print button

I am trying to remove the navbar and print button from the page that I am trying to print. I attempted to use CustomSwitches but Rotativa does not appear to like them.
string customSwitches =
"--disable-smart-shrinking --header-html {0} --footer-html {1}";
var printForm = new ActionAsPdf("Receipt", new { id = id })
{
PageSize = Rotativa.Options.Size.Legal,
CustomSwitches = customSwitches
};
return printForm;
My view for reference: Print view.
What are some thoughts?

You can use --print-media-type custom switch.
Apply the class no-print for your navbar div and button
Then write your CSS like this
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}

apply specific css element

I am using a Telerik rad org chart. Basically I want to apply certain CSS style based on a condition.
I have figured out how to just override a css styles:
.rocToolbar_Metro .rocToolbarButton { background-color: #32b330 !important;}
But I can’t figure out how to do this conditionally via the code behind, so saying if condition == 1 then apply this:
.rocToolbar_Metro .rocToolbarButton { background-color: #32b330 !important;}
Else apply this:
.rocToolbar_Metro .rocToolbarButton { background-color: #25a0da !important;}
I am planning to do this within the NodeDataBound event. Any suggestions appreciated.
Thanks.

Add JS on your page which will be changing button color and next you can use ScriptManager to fire this javascript from nodedatabound event.
Add JS
function setColor1() {
$("#rocToolbarButton").css("background-color","#25a0da");
}
NodeDataBound event
protected void RadTreeView_OnNodeDataBound(object sender, RadTreeNodeEventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "setColor1", "setColor1();", true);
}

You can also add css property without needing to write new classes to override the actual one
$(document).ready(function(){
var condition = 1;
if(condition == 1){
$('.rocToolbarButton').css('background-color', '#32b330;');
}
else{
$('.rocToolbarButton').css('background-color', '#25a0da;');
}
});
This works as follows:
$('cssSelector').css('property','value');

asp.net programatically created table and css priority

I have a table which I create programatically in my code behind file and set the colours of alternate row to gray for easier visibility like so:
<New cells and rows created here>
tblResults.GridLines = GridLines.Both;
tblResults.BorderStyle = BorderStyle.Solid;
tblResults.HorizontalAlign = HorizontalAlign.Center;
if (rowNumber % 2 == 1)
{
tblRow.BackColor = System.Drawing.Color.LightGray;
}
tblResults.Rows.Add(tblRow);
tblResults.CssClass = "myclass" ;
pnlContent.Controls.Add(tblResults);
I also want to have the rows highlighted when a user hovers over them like so:
.myclass tr:hover
{
background: #FCF;
}
Now the hover only seems to work for the rows which are not highlighted gray from the c# code which I assumes takes precedence over the css.
How can I also make those gray rows work with the css hover?

Try this hope it helps, I think some where the Style inside the page is overwriting your light Grey Background. Try this it will be ease to find the solution
if (rowNumber % 2 == 1)
{
tblRow.Attributes.Add("Class","ClassName_grey");
}
else{
tblRow.Attributes.Add("Class","ClassName_nothing")
}
.myclass tr:hover
{
background: #FCF;
}
.ClassName_grey {
background: #eeeeee;
}

You might try
.myclass tr:hover
{
background-color: #FCF;
}
Or adding the !important qualifier. The former is basically setting the same style as the server-side code should be, whereas your code was setting the less specific background (all aspects of it, not just colour).
Otherwise try viewing the source or using developer tools to see what style attribute you need to overwrite.

get height of div from masterpage

How can I get the height of a div which is placed inside a masterpage?
I'm able to set the height as follow:
((HtmlControl)this.Master.FindControl("sidebar")).Style.Add("height", "600px");
Now I'm trying to get the height from my div called mainPage, how can I do this?

MasterPage.Master:
<div id="_test" style="height: 100px" runat="server"></div>
MasterPage.Master.cs:
public HtmlGenericControl test
{
get { return this._test; }
}
any other cs-file:
string width = ((MasterPage)this.Master).test.style["height"];
Edit: If you want to get any style information created dynamically you will need to store this information into a hidden field, because you won't be able to retrieve the data by calling style["x"] in the postback.
Edit2: Adjusted masterpage-name.

You will have to get the div's height on the client side as it may be rendered differently for each client...
Using jQuery, you can do
$("#sidebar").height();
but for this you will have to wait that the document is ready. So you can put this line in the ready function of the document:
$(document).ready(function(){});
EDIT
Another solution is adding runat="server" to your div
<div ID="sidebar" runat="server">...</div>
Then from your code you can do something like
HtmlGenericControl sb = this.form1.FindControl("sidebar") as HtmlGenericControl;
int sidebarHeight = sb.Height;

How can I create image tags?

I have the following function that allows me to iterate through each page in a multi-page single tiff file.
// This function will iterate all pages, one at a time. //
protected void PrintAll_Click(object sender, EventArgs e)
{
// counts number of pages in the fax document.//
int number = _FaxPages.Count;
// for loop to iterate through each page. //
for (int i = 0; i < number; i++)
{
string _FaxId = Page.Request["FaxId"];
_PageIndex = i;
imgFax.ImageUrl = "ShowFax.ashx?n=" + _FaxId + "&f=" + _PageIndex + "&mw=750";
PrintAll.Attributes.Add("onclick", "return printing()");
}
}
I want to know how to dynamically create separate image tags within the for loop...such that I can use these images to print all the pages inside the tiff file.
Right now If I use window.print() in my javascript.. it prints the entire webpage along with buttons, links, text boxes, check boxes, etc.. I just need to be able to print only the images inside the fax document which is a SINGLE TIFF FILE with MULTIPLE PAGES (FRAMES).
please help.

You should create a alternate stylesheet that is for printing.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
and in your case you could hide all elements and show only img tags. This seems pretty specific so maybe create a print.fax.css and use it on this page only.