Oct 25, 2012, 7:30 PM
[CLOSED] Print a grid panel javascript error
Hello,
I need your help. I have a grid panel with a toolbar that contains a print button.
When i click on the button print i get the following error:
Microsoft JScript runtime error: Unable to set value of the property 'innerHTML': object is null or undefined
When click then continue the new page opens up but empty. if i click print again. the grid panel data shows up in the printpage and i can print at this point.
I found some code on forums to help implemt this and this how the sample code looks like:
Please note that i had to comment the last line of code of the function printGrid to get some partial result. when it is uncommented.
My browser is IE9.
1) Here is the Code Behind:
2) My Javascript is like this page is like this:
I need your help. I have a grid panel with a toolbar that contains a print button.
When i click on the button print i get the following error:
Microsoft JScript runtime error: Unable to set value of the property 'innerHTML': object is null or undefined
When click then continue the new page opens up but empty. if i click print again. the grid panel data shows up in the printpage and i can print at this point.
I found some code on forums to help implemt this and this how the sample code looks like:
Please note that i had to comment the last line of code of the function printGrid to get some partial result. when it is uncommented.
My browser is IE9.
1) Here is the Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}
}
protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
{
this.BindData();
}
protected void BindData()
{
var storeactive = this.gpactive.GetStore();
storeactive.DataSource = this.Data;
storeactive.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
};
}
}2) My Javascript is like this page is like this:
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";
}<ext:Hidden ID="FormatTypeIncoming" runat="server" />
<ext:GridPanel ID="gpIncoming" runat="server" Title="Incoming Pipeline / Declined Deals">
<Store>
<ext:Store ID="gpincomingstore" runat="server" OnReadData="MyData_Refresh" OnSubmitData="StSubmitIncoming"
PageSize="10" RemoteSort="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date"/>
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="company" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<TopBar>
<ext:Toolbar ID="ToolbarIncoming" runat="server">
<Items>
<ext:ToolbarFill ID="ToolbarFillIncoming" runat="server" />
<ext:Button ID="btnExcelIncoming" runat="server" Text="To Excel" Icon="PageExcel">
<Listeners>
<Click Handler="submitValueIncoming(#{gpIncoming}, #{FormatTypeIncoming}, 'xls');" />
</Listeners>
</ext:Button>
<ext:Button ID="btnPrintgpinitial" runat="server" Text="Print" Icon="Printer" OnClientClick="printGrid(#gpIncoming},# {PrintWindow});">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ColumnID="Change" Header="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column Header="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
</ext:GridPanel>
<ext:Window ID="PrintWindow" runat="server" Width="1200" Height="400" Hidden="true">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Print" Icon="Printer" OnClientClick="#{PrintWindow}.getBody().print();" />
</Items>
</ext:Toolbar>
</TopBar>
<Loader runat="server" Url="Pageprint.aspx" Mode="Frame"></Loader>
</ext:Window><!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">
<title>Print Page</title>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all-embedded-css/ext.axd" />
</head>
<body>
</body>
</html>
Last edited by Daniil; Nov 05, 2012 at 3:42 PM.
Reason: [CLOSED]
Originally Posted by otouri
