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, 

--Andrea 

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 

 Are you using a print stylesheet? If yes, please send your CSS code along with the aspx code for the problematic grid.

Hi

  i have a problem in export the ultarwebgrid to pdf. I have to display the lines between the columns. i tried applying the style and also by setting the border color. but i dont get the lines . Below is my code for the ultrawebgrid

<igtbl:UltraWebGrid ID="UltraWebGrid1" runat="server" Width="100%" Height="212px">

<DisplayLayout AllowColSizingDefault="Free" HeaderStyleDefault-BackgroundImage="Images/header.jpg"

AutoGenerateColumns="true" BorderCollapseDefault="Separate" Name="igGridTwo"

RowHeightDefault="20px" StationaryMargins="Header" StationaryMarginsOutlookGroupBy="True"

TableLayout="Fixed" Version="4.00" ViewType="Hierarchical" AllowRowNumberingDefault="ByDataIsland">

<FrameStyle Width="100%" Height="95%">

</FrameStyle>

<Pager AllowPaging="True" PageSize="20" Alignment="Left" PagerAppearance="Both">

</Pager>

<RowStyleDefault Font-Names="Verdana" Font-Size="8pt">

</RowStyleDefault>

<ActivationObject BorderColor="" BorderWidth="">

</ActivationObject>

<RowAlternateStyleDefault >

</RowAlternateStyleDefault>

<RowSelectorStyleDefault >

</RowSelectorStyleDefault>

</DisplayLayout>

<Bands>

<igtbl:UltraGridBand>

<AddNewRow View="NotSet" Visible="NotSet">

</AddNewRow>

</igtbl:UltraGridBand>

</Bands>

</igtbl:UltraWebGrid>

End With

Can anybody tell em how do i get the vertical lines to be displayed in the PDF as well as in the grid. i am using the documentexporter.

i have also tried setting the border color in the initialize row of the documentexporter.

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