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
Nope, no print stylesheet, just trying to print what it looks like on the screen, there's just the grid and a print button that calls window.print() ...
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title></title> <script language="javascript" type="text/javascript"> <!-- function Print() { window.print(); } //--> </script> </head><body> <form id="form1" runat="server"> <table cellpadding="0" cellspacing="0" border="0" width="750"> <tr> <td><div style="height:525px; width:600px; position:relative"> <igtbl:ultrawebgrid id="UltraWebGrid1" runat="server" ImageDirectory="/ig_common/Images/" Height="522px" Width="100%"> <Bands> <igtbl:UltraGridBand> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> </igtbl:UltraGridBand> </Bands> <DisplayLayout RowHeightDefault="20px" Version="4.00" ViewType="Hierarchical" BorderCollapseDefault="Separate" RowSelectorsDefault="No" Name="UltraWebGrid1" AllowSortingDefault="Yes" HeaderClickActionDefault="SortSingle"> <AddNewBox> <BoxStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </BoxStyle> </AddNewBox> <Pager> <PagerStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </PagerStyle> </Pager> <HeaderStyleDefault BorderStyle="Solid" Height="20px" Cursor="Default"> <BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White"></BorderDetails> </HeaderStyleDefault> <FrameStyle Width="748px" BorderWidth="1px" Font-Size="8pt" Font-Names="Verdana" BorderColor="Gray" BorderStyle="Solid" Height="522px"></FrameStyle> <FooterStyleDefault BorderWidth="1px" BorderStyle="Solid"> <BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White"></BorderDetails> </FooterStyleDefault> <ActivationObject BorderWidth="" BorderColor=""></ActivationObject> <Images> <CollapseImage Url="./images/collapsemenu.gif"></CollapseImage> <ExpandImage Url="./images/expandmenu.gif"></ExpandImage> </Images> <EditCellStyleDefault BorderWidth="0px" BorderStyle="None"></EditCellStyleDefault> <RowStyleDefault BorderWidth="1px" BorderColor="Gray" BorderStyle="Solid"> <Padding Left="3px"></Padding> <BorderDetails WidthLeft="0px" WidthTop="0px"></BorderDetails> </RowStyleDefault> <FilterOptionsDefault AllowRowFiltering="OnServer" FilterIcon="False" RowFilterMode="AllRowsInBand"> </FilterOptionsDefault> </DisplayLayout> </igtbl:ultrawebgrid></div> </td> </tr> <tr> <td> <table id="Table1" style="HEIGHT: 32px" cellSpacing="0" cellPadding="0" width="100%" border="0"> <tr> <td style="WIDTH: 10%" valign="bottom"> <asp:HyperLink id="hlPrint" runat="server" ImageUrl="Images/print_24.gif" NavigateUrl="BLOCKED SCRIPTPrint();">HyperLink</asp:HyperLink></td> </tr> </table> </td> </tr> </table> </form></body></html>
The grid is being built in code behind here in UltraWebGrid1_InitializeLayout:
'Formatting of the main band UltraWebGrid1.DisplayLayout.NoDataMessage = "No Data to Display" UltraWebGrid1.DisplayLayout.HeaderStyleDefault.VerticalAlign = VerticalAlign.Middle UltraWebGrid1.DisplayLayout.HeaderStyleDefault.HorizontalAlign = HorizontalAlign.Center UltraWebGrid1.DisplayLayout.HeaderStyleDefault.Font.Bold = True UltraWebGrid1.DisplayLayout.RowStyleDefault.HorizontalAlign = HorizontalAlign.Center UltraWebGrid1.DisplayLayout.RowAlternateStyleDefault.BackColor = Color.LightGray With (UltraWebGrid1.DisplayLayout.Bands(0)) .ColHeadersVisible = Infragistics.WebUI.UltraWebGrid.ShowMarginInfo.No .Columns(1).CellStyle.Font.Bold = True .Columns(1).CellStyle.HorizontalAlign = HorizontalAlign.Left .Columns(1).CellStyle.VerticalAlign = VerticalAlign.Middle .RowAlternateStyle.BackColor = System.Drawing.Color.White .Columns(0).Hidden = True .Columns(1).Width = Unit.Pixel(682) End With 'Formatting of the Second Band With UltraWebGrid1.DisplayLayout.Bands(1) .Columns(0).Width = Unit.Pixel(100) .Columns(1).Width = Unit.Pixel(120) .Columns(2).Width = Unit.Pixel(170) .Columns(3).Width = Unit.Pixel(250) .Columns(0).Format = "MMM. dd, yyyy" .Columns(4).Hidden = True .Columns(5).Hidden = True .Columns(6).Hidden = True .Columns(7).Hidden = True .Columns(8).Hidden = True .Columns(9).Hidden = True .Columns(10).Hidden = True .Columns(11).Hidden = True .Columns(12).Hidden = True .Columns(13).Hidden = True End With 'Formatting of the Details Band With UltraWebGrid1.DisplayLayout.Bands(2) .Columns(0).Width = Unit.Pixel(225) .Columns(1).Width = Unit.Pixel(155) .Columns(2).Width = Unit.Pixel(100) .Columns(3).Width = Unit.Pixel(133) .Columns(2).Format = "MMM. dd, yyyy" .Columns(3).Format = "$###,###.00" .Columns(4).Hidden = True .RowStyle.BorderStyle = BorderStyle.None .RowStyle.BackColor = System.Drawing.Color.WhiteSmoke .RowAlternateStyle.BackColor = System.Drawing.Color.WhiteSmoke End With
Are you using a print stylesheet? If yes, please send your CSS code along with the aspx code for the problematic grid.
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
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
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,