|
|
|
Adding Printer Friendly Option To Multi Header GridView - Part II
|
|
|
|
|
|
|
|
|
| |
1 people have rated this article
|
|
|
|
|
|
|
|
|
|
|
Many customer wants to have some realistic functionality like Print, Save options to their reports.
In the previous article, we built a custom gridview with extra header. This article describes how to add Printer Friendly Button to the extra header.
Please refer
Adding
Printer Friendly to ASP.NET pages
article before going to this article. We are going to use a javascript
function to print the GridView.
First,formulate our ideas
-
Automatically Generate Styles for the Button.
- Adding Print Button and Script to the Extra Header.
- Automatically re-structure the Print Button position and Header text according to the number of columns present in GridView Header.
To make the printer button contrast,make the header background as button font-color
and row-style background as button background.So that we will get right color combination.
String strButtonStyle = String.Format(@"font: 10pt Verdana,sans-serif;
text-align: center;
color:{0};
background-color:{1};
border: 1px solid {2};
cursor: hand;
padding:2px 4px 2px 4px; ", ColorTranslator.ToHtml(this.HeaderStyle.BackColor)
, ColorTranslator.ToHtml(this.RowStyle.BackColor)
.
Button will occupy last cell of the extra header.Remaining will be occupied by header text.
PrintButton = "<th scope='col' colspan='{0}' id=\"PrintOptionCell\">";
PrintButton += "<INPUT type='submit' value='PrinterFriendly' style='{1}' class=\"UserFriendlyButton\" onclick=\"javascript:PrintGridView('{2}','{3}');return false;\" />";
PrintButton += "</th>";
PrintButton = String.Format(PrintButton, 1,
strButtonStyle,
this.ClientID,
this.ExtraHeaderText
);
, ColorTranslator.ToHtml(this.HeaderStyle.BackColor));
We are passing Gridview’s Client ID and Header text to the Javascript OnClick Event.
Header Text is used for displaying page title on the new popup printer window.
Also you may notice that the print button mentioned as id= PrintOptionCell.The reason is to hide the printer option while showing printer friendly page. In the script, we have a style theme #PrintOptionCell INPUT{display:none;}. This will only hide the button or any INPUT tag in that PrintOptionCell layer. Avoid using INPUT{display:none;} without a layer id. Because this style will hide all autogeneratedbuttons,checkbox inside the gridview.
This control decides structure based on the number of header columns. If the GridView has less than 3 columns,then it will places title and print button in a separate row. If the GridView more than 2 columns, then it will places title and print button in a same header.The printer friendly option would occupy the last cell of the header row. This makes our control more fancy.
|
|
Please Sign In In to post messages.
|