I'm having a bear of a time getting the grid to display properly online and in print.
Does anyone have examples of an accessible, CSS-driven ultrawebgrid layout that uses % for column and FrameStyle widths along with an associated print stylesheet?
--Andrea
Andrea - there's a readonly mode for the grid which can be used for better printing support. The grid relies on a whole tangle of specially positioned divs, etc. which don't really translate to a print document very well. IE7 has much better support for printing, but it's still not the best. If you set the grid.DisplayLayout.ReadOnly=LevelThree, the grid will render with much less HTML and JavaScript and will give you better results in setting a specific print stylesheet. BTW, the grid already sets some rules up for a @media print, so you'll want to be sure your settings aren't being overridden.
http://help.infragistics.com/Help/NetAdvantage/NET/2007.3/CLR2.0/html/WebGrid_Set_the_Level_of_WebGrids_Read_Only_Mode.html
Good Afternoon Tony,
Thanks for your quick response. That's neat functionality.
Is there a way to toggle that mode (or otherwise revert to the mode's grid settings) only when printing?
We need to be able to give a specific vertical height to the grids, stretch columns manually to reveal data, and mouse over hidden colun data to display tooltips. All this is lost with ReadOnly = PrinterFriendly.
How are you handling print styles on your complex grids?
Also, is there detailed documentation about what divs, etc the grids produce -- and what can/can't be maniulated with CSS? We're very thirsty for some best practices related to CSS styling.
All my best,
The printer friendly readonly mode was added with a particular scenario in mind - your classic "printer friendly version", where you click on a link and a new window opens up with a printer friendly formatted grid. This seems to be an extremely common paradigm for web based printing. Because of this, the printer friendly read-only mode really treats the grid more like a standard html table, and removes most of the active functionality and extra markup. If you want, you can open a new window and call the "print" function of the browser through javascript. This works well to keep the user from having to manually open a new page and start the print process.
We have added a few print styles to the grid for cases where we've found that a minor css addition will make the printed copy come out much more like the original. There was one main case where the grid would only print out data on the first page, and each additional page was blank. We addressed this with a special css rule (that will show up in your rendered HTML if you view source). I don't have the specifics on each of the cases as they were very specific and the rule that was added was also very specific to the problem.
As a final printing alternative, may I suggest the WebGridDocumentExporter? It will allow you to export the grid into a PDF document, where you can have 100% total and absolute control over what the grid will look like in a printed format.
If you're looking for best practices with CSS, I'd recommend you use Application Styling for the grid. We've built a best practices scenario around application styling by adding well named class names to the various "class" attributes of grid elements. If you choose to use Application Styling, you will simply be filling out a stubbed stylesheet rather than working everything from scratch.
Hope this helps,
-Tony
I'm running into the issue of only data showing on the first page and the rest being blank. It seems to be fine if the datagrid does spans only 1 or 2 pages but as soon as it is 3 pages then there is only data showing on the first page and the rest are blank. I'm also setting a height of 500px to the datagrid but this seems to be ignore when printing, everything works fine on the actual page, the issue seems to be just affecting IE.. Any help would be greatly appreciated...
-Regan
Hi Regan,
Not sure which version you're using, but back in 2006 if I recall, we added a new Grid.DisplayLayout.ReadOnlyMode for printing support. Toggling the ReadOnlyMode to printerfriendly (level 4 I think) should fix the problem. We also later made changes to the default grid styles to enable better printing support without even setting the readonly mode. I think that fix came at some point in 2007. What ever release you're on, you may want to test it with the latest hotfix and see if that resolves the problem.
Regards,
Hi Tony,
If I publish the UltraWebGrid Report after filtering the grid it prints only 50 records in 2 pages whereas after filtering the grid there should be 34 pages with 30 rows per page. If I publish the report without using grid filteration it prints perfectly.
Here is my code for printing:
On ImageButton click event i call the following function:
public void ProcCreateReport(UltraWebGrid theGrid, HttpResponse theResponse, bool openInline) { //try //{ Report theReport = new Report(); Infragistics.Documents.Report.Section.ISection theSection = theReport.AddSection(); //Table Pattern (think of this as a kind of "Style Sheet" for ITable //to add page numbers theSection.PageNumbering.SkipFirst = false; theSection.PageNumbering.OffsetY = -18; theSection.PageNumbering.Template = "Page [Page #] of [TotalPages]"; //Add headertext ISectionHeader s1header = theSection.AddHeader(); s1header.Height = 20; s1header.Repeat = true; IText s1headertitle = s1header.AddText(0, 0); Infragistics.Documents.Report.Text.Style bluelink = new Infragistics.Documents.Report.Text.Style(new Font("Aria", 10), Brushes.Black); s1headertitle.AddContent("Activities For Specific Period", bluelink); s1headertitle.Alignment = TextAlignment.Center; //s1headertitle.AddLineBreak(); IText s1headertimestamp = s1header.AddText(0, 0); s1headertimestamp.AddContent("Printed On: ", bluelink); s1headertimestamp.AddDateTime("dd/MM/yyyy", bluelink); s1headertimestamp.Alignment = TextAlignment.Right; //s1headertimestamp.AddLineBreak(); // Add a caption with some more information ReportText.IText caption = theSection.AddText(); ReportText.Style captionStyle = new ReportText.Style(new Infragistics.Documents.Graphics.Font("Tahoma", 9), Infragistics.Documents.Graphics.Brushes.Black); caption.AddContent("Buyer:", captionStyle); caption.AddLineBreak(); caption.AddContent("Merchandiser:", captionStyle); caption.AddLineBreak(); caption.AddContent("User:", captionStyle); caption.AddLineBreak(); caption.AddContent("Season:", captionStyle); caption.AddLineBreak(); caption.Margins.Bottom = 12; Infragistics.Documents.Report.Table.TablePattern theTablePattern = new Infragistics.Documents.Report.Table.TablePattern(); theTablePattern.Header.Repeat = true; theTablePattern.Header.Cell.Background = new Background(Infragistics.Documents.Graphics.Brushes.WhiteSmoke); theTablePattern.Row.Cell.Background = new Background(Infragistics.Documents.Graphics.Brushes.White); Infragistics.Documents.Report.Table.ITable theTable = theSection.AddTable(); theSection.PageMargins = new Margins(20f); theTable.ApplyPattern(theTablePattern); Infragistics.Documents.Report.Table.ITableCell theHeaderCell = null; Infragistics.Documents.Report.Text.IText theHeaderText = null; //Iterate through the Grid Cols and create corresponding headers in the ITable foreach (UltraGridColumn c in theGrid.Columns) { theHeaderCell = theTable.Header.AddCell(); theHeaderText = theHeaderCell.AddText(); theHeaderText.Style.Brush = new Infragistics.Documents.Graphics.SolidColorBrush(Infragistics.Documents.Graphics.Colors.Black); theHeaderText.Style.Font = new Infragistics.Documents.Graphics.Font("Tahoma", 6, FontStyle.Bold); theHeaderText.AddContent(c.Header.Caption); } Infragistics.Documents.Report.Table.ITableRow theRow = null; Infragistics.Documents.Report.Table.ITableCell theRowCell = null; Infragistics.Documents.Report.Text.IText theRowText = null; //Now create your rows: for (int r = 0; r < (theGrid.Rows.Count); r++) { theRow = theTable.AddRow(); foreach (UltraGridColumn c in theGrid.Columns) { theRowCell = theRow.AddCell(); theRowText = theRowCell.AddText(); theRowText.Style.Brush = new Infragistics.Documents.Graphics.SolidColorBrush(Infragistics.Documents.Graphics.Colors.Black); theRowText.Style.Font = new Infragistics.Documents.Graphics.Font("Tahoma", 6); if (theGrid.Rows[r].Cells.FromKey(c.Key).Value != null) { if ((c.Key == "Completion Target(%)") || (c.Key == "Actual Status(%)")) { //theRowCell.Alignment.Horizontal = Infragistics.Documents.Report.Alignment.Middle; theRowText.Alignment.Horizontal = Infragistics.Documents.Report.Alignment.Center; } if ((c.Key == "Target Date") || (c.Key == "Revise Date") || (c.Key == "Actual Date")) { if (theGrid.Rows[r].Cells.FromKey(c.Key).ToString() != "") { theRowText.AddContent(objCommonFunction.FuncGetDateFormat(theGrid.Rows[r].Cells.FromKey(c.Key).ToString())); } } else { theRowText.AddContent(theGrid.Rows[r].Cells.FromKey(c.Key).ToString()); } } } theRowText.AddLineBreak(); } //Set up the response for publishing the Report: theResponse.ContentType = "application/pdf"; if (openInline) { //Opens in Browser Itself. theResponse.AddHeader("content-disposition", "inline; filename=Document.pdf"); } else { //Prompts user for a file download. theResponse.AddHeader("content-disposition", "attachment; filename=Document.pdf"); } //Write out to the response.Output Stream and you are done. theReport.Publish(theResponse.OutputStream, FileFormat.PDF); theResponse.Flush(); theResponse.End(); //} //catch (Exception ex) //{ // Response.Write(ex.Message); //} }
Kindly suggest any soln...Its urgent..
Hi Junaid,
The WebGrid doesn't have the 'smarts' to accomplish this task. The grid will automatically stretch to fit all of the content so that data doesn't get clipped, but printing support for a browser is terribly primitive. I would recommend if you're looking to take this level of control over printing, you use the Infragistics DocumentEngine to construct a PDF document. Using the api's for the DocumentEngine, you will have much more control over how each page looks, and how big the contents are. In the end though, the majority of the work will be figuring out how to lay everything out.
Hi,
I wanted to print the ultrawebgrid on a paper. I wanted to print the column names on all the pages. I also wanted to wrap the text in each row of the grid so that the data(if there are many coumns in the grid or change the font size) fits on a page on a landscape or portrait mode. I need the code to accomplish this.
Thanks,
Junaid.