[CLOSED] Print page for gridpanel

[kevinhwang]

Hi Support team,

I try to print out a grid panel and followed the link below.

http://forums.ext.net/showthread.php?14585&p=61460&viewfull=1#post61460

But I got a error message below.



<script type="text/javascript">
function printGrid(grid, window) {
window.show();
var bd = window.getBody();

bd.document.body.innerHTML = grid.body.dom.innerHTML;
bd.document.getElementById(grid.view.el.id).style. height = "auto";
bd.document.getElementById(grid.view.scroller.id). style.height = "auto";

}
</script>
<ext:Button ID="Button13" runat="server" Text="Print" OnClientClick="printGrid(#{GridPanel1}, #{PrintWindow});">
</ext:Button>
<ext:GridPanel ID="GridPanel1" runat="server" Width="750">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="ProcurementMilestoneID" Type="Int" />
<ext:ModelField Name="Advantage_id" Type="Int" />
<ext:ModelField Name="Folder_Nbr" Type="Int" />
<ext:ModelField Name="Code" Type="String" />
<ext:ModelField Name="Requisition_id" Type="String" />
<ext:ModelField Name="ProcurementID" Type="Int" />
<ext:ModelField Name="Process_Milestone_ID" Type="Int" />
<ext:ModelField Name="Milestone_Id" Type="Int" />
<ext:ModelField Name="Milestone_Desc" Type="String" />
<ext:ModelField Name="Sequence" Type="Int" />
<ext:ModelField Name="Milestone_dt" Type="Date" />
<ext:ModelField Name="IsLineClosed" Type="Boolean" />
<ext:ModelField Name="DoNotDelete" Type="Boolean" />
<ext:ModelField Name="Waived" Type="Boolean" />
<ext:ModelField Name="Note" Type="String" />
<ext:ModelField Name="SubProcessMilestone_Id" Type="Int" />
<ext:ModelField Name="SubProcess_Desc" Type="String" />
<ext:ModelField Name="SubProcess_Step" Type="Int" />
<ext:ModelField Name="Mod_By" Type="Int" />
<ext:ModelField Name="Mod_dt" Type="Date" DateFormat="MM-dd-yyyy" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="35" Text="No" />
<ext:Column ID="Column50" runat="server" Text="Desc" DataIndex="Milestone_Desc" Width="270"
ReadOnly="True">
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" DataIndex="Milestone_dt" Text="Date"
Width="100" Format="MM-dd-yyyy">
<Editor>
<ext:DateField ID="DateField3" runat="server">
</ext:DateField>
</Editor>
</ext:DateColumn>
<ext:Column ID="Column51" runat="server" Text="Note" DataIndex="Note" Width="270">
<Editor>
<ext:TextField ID="TextField6" runat="server">
</ext:TextField>
</Editor>
</ext:Column>
<ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Text="Delete">
<Commands>
<ext:ImageCommand CommandName="delete" Icon="Delete" Text="Delete" ToolTip-Text="Click To Delete Milestone">
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Fn="onDeleteMilestoneCommand" />
</Listeners>
<PrepareCommand Fn="prepareCommand" />
</ext:ImageCommandColumn>
<%--<ext:ImageCommandColumn ID="imgDelMilestone" CommandName="Delete" runat="server"
ImageUrl="~/Images/DelRecord.gif" ToolTip="Click To Delete Milestone" />--%>
<ext:Column ID="Column1" DataIndex="ProcurementMilestoneID" runat="server" Text="ProMileID"
Visible="False" ReadOnly="True" />
<ext:Column ID="Column2" DataIndex="ProcurementID" runat="server" Text="ProID" Visible="False"
ReadOnly="True" />
<ext:Column ID="Column8" DataIndex="Advantage_Id" runat="server" Text="ReqID" Visible="False"
ReadOnly="True" />
<ext:Column ID="Column9" DataIndex="Sequence" runat="server" Text="Sequence" Visible="False"
ReadOnly="True" />
<ext:Column ID="Column10" DataIndex="IsLineClosed" runat="server" Text="IsLineClosed"
Visible="False" ReadOnly="True" />
<ext:Column ID="Column11" DataIndex="DoNotDelete" runat="server" Text="DontDelete"
Visible="False" ReadOnly="True" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<View>
<ext:GridView ID="GridView1" runat="server">
<Plugins>
<ext:GridDragDrop ID="GridDragDrop1" runat="server" DragText="Drag and drop to reorganize" />
</Plugins>
<Listeners>
<Drop Handler="App.ContentPlaceHolderMain_GridPanel1.columns[0].doSort();" />
</Listeners>
</ext:GridView>
</View>
<Plugins>
<ext:RowEditing ID="RowEditing2" runat="server" ClicksToMoveEditor="1" AutoCancel="false"
SaveHandler="validateUpdateMileStone">
<Listeners>
<Edit Fn="editMilestone" />
</Listeners>
</ext:RowEditing>
</Plugins>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnMilestoneUndo" runat="server" Text="Cancel Re-order" ToolTip="Click To cancel reordering Milestone">
<Listeners>
<Click Fn="onbtnMilestoneUndo_Click" />
</Listeners>
</ext:Button>
<ext:Button ID="btnMilestoneSaveReorder" runat="server" Text="Save Re-order" ToolTip="Click To Save Updates of reordering Milestone">
<Listeners>
<Click Fn="onMilestoneReordering" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRestart" runat="server" Text="Restart">
<Listeners>
<Click Fn="onProcurementRestart" />
</Listeners>
</ext:Button>
<ext:Button ID="btnCancelProcure" runat="server" Text="Cancel Procurement" Hidden="false"
ToolTip="Click To Cancel Procurement. All uncompleted milestones will be deleted">
<Listeners>
<Click Fn="onCancelProcurement_Click" />
</Listeners>
</ext:Button>
<ext:Button ID="Button10" runat="server" Text="Add Milestone">
<Listeners>
<Click Handler="#{WinAddMilestone}.show();Ext.fly('form1').mask();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button11" runat="server" Text="Add Sub Process">
<Listeners>
<Click Handler="#{WinAddSubProcess}.show();Ext.fly('form1').mask() ;" />
</Listeners>
</ext:Button>
<ext:Button ID="Button13" runat="server" Text="Print" OnClientClick="printGrid(#{GridPanel1}, #{PrintWindow});">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
<ext:Window ID="PrintWindow" runat="server" Width="700" Height="400" Hidden="true">
<TopBar>
<ext:Toolbar ID="Toolbar7" runat="server">
<Items>
<ext:Button ID="Button9" runat="server" Text="Print" Icon="Printer" OnClientClick="#{PrintWindow}.getBody().print();" />
</Items>
</ext:Toolbar>
</TopBar>
<AutoLoad Url="Print.aspx" Mode="IFrame">
</AutoLoad>
</ext:Window>

-- PRINT.ASPX --
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Print.aspx.vb" Inherits="ContractsCentral.Print" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all-embedded-css/ext.axd" />
</head>
<body>

</body>
</html>






Server Error in '/' Application.
--------------------------------------------------------------------------------

Parser Error
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Type 'Ext.Net.Window' does not have a public property named 'AutoLoad'.

Source Error:


Line 2154: </ext:Toolbar>
Line 2155: </TopBar>
Line 2156: <AutoLoad Url="Print.aspx" Mode="IFrame">
Line 2157: </AutoLoad>
Line 2158: </ext:Window>


Source File: /ProcurementDetail.aspx Line: 2156


--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.261

[Baidaly]

Hello!

Those example is for Ext.NET 1.x. In 2.x you should use loader:


<ext:Window ID="PrintWindow" runat="server" Width="700" Height="400">
<TopBar>
<ext:Toolbar ID="Toolbar7" runat="server">
<Items>
<ext:Button ID="Button9" runat="server" Text="Print" Icon="Printer" />
</Items>
</ext:Toolbar>
</TopBar>
<Loader runat="server" Url="http://ext.net"
Mode="Frame">
<LoadMask ShowMask="True" />
</Loader>
</ext:Window>

[kevinhwang]

Hi Baidaly,

Thanks for your replying.

I changed it and it worked fine with firefox but not on IE.
I had an JavaScript error message on printGrid function and I captured a screenshot below.

6626

I rarely saw the same error message on firefox too.


Kevin


Hello!

Those example is for Ext.NET 1.x. In 2.x you should use loader:


<ext:Window ID="PrintWindow" runat="server" Width="700" Height="400">
<TopBar>
<ext:Toolbar ID="Toolbar7" runat="server">
<Items>
<ext:Button ID="Button9" runat="server" Text="Print" Icon="Printer" />
</Items>
</ext:Toolbar>
</TopBar>
<Loader runat="server" Url="http://ext.net"
Mode="Frame">
<LoadMask ShowMask="True" />
</Loader>
</ext:Window>

[Baidaly]

This happens because you are trying to access document when it's not loaded yet. You should use Callback and in Callback you should access your print page:


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<script>
var doSomethingAfterLoad = function() {
Ext.Msg.alert('', 'Loaded!');
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Window ID="PrintWindow" runat="server" Width="700" Height="400">
<TopBar>
<ext:Toolbar ID="Toolbar7" runat="server">
<Items>
<ext:Button ID="Button9" runat="server" Text="Print" Icon="Printer" />
</Items>
</ext:Toolbar>
</TopBar>
<Loader runat="server" Url="http://ext.net"
Mode="Frame" Callback="doSomethingAfterLoad();">
<LoadMask ShowMask="True" />
</Loader>
</ext:Window>
</form>
</body>
</html>

[kevinhwang]

Hi Baidaly,

Thanks for letting me know about CallBack property for the loader in window.
But I have an one more problem about scroll bar inside window.
Firefox is fine to render properly but IE is making a problem.
The window on IE is displaying both scrollbar(X,Y) and it cuts off the contents when I do printing.

On firefox:
6642

On IE:
6643

Kevin


This happens because you are trying to access document when it's not loaded yet. You should use Callback and in Callback you should access your print page:


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<script>
var doSomethingAfterLoad = function() {
Ext.Msg.alert('', 'Loaded!');
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Window ID="PrintWindow" runat="server" Width="700" Height="400">
<TopBar>
<ext:Toolbar ID="Toolbar7" runat="server">
<Items>
<ext:Button ID="Button9" runat="server" Text="Print" Icon="Printer" />
</Items>
</ext:Toolbar>
</TopBar>
<Loader runat="server" Url="http://ext.net"
Mode="Frame" Callback="doSomethingAfterLoad();">
<LoadMask ShowMask="True" />
</Loader>
</ext:Window>
</form>
</body>
</html>

[Baidaly]

But I have an one more problem about scroll bar inside window.
Firefox is fine to render properly but IE is making a problem.
The window on IE is displaying both scrollbar(X,Y) and it cuts off the contents when I do printing.


I don't think that your problem is related to Ext.NET because the Window just loads content from the page into the IFrame. You should check CSS rules and markup. We can try to help you if you provide a full sample with Print page. But your sample should be simplified and runnable.

[kevinhwang]

Hi Baidaly,

I found the problem coming from the gridpanel of the original page not from print page.
I saw both scrollbars on actual page so that cut off the contents.
After I adjust the column width everything works properly.

Thanks,

Kevin


I don't think that your problem is related to Ext.NET because the Window just loads content from the page into the IFrame. You should check CSS rules and markup. We can try to help you if you provide a full sample with Print page. But your sample should be simplified and runnable.