PDA

View Full Version : [CLOSED] Print a grid panel javascript error



otouri
Oct 25, 2012, 7:30 PM
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:



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";
}

3) My ASpx page is like this:



<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>



4) Here is the print page aspx:



<!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>

otouri
Oct 31, 2012, 3:29 PM
I can pinpoint the error it breaks in the javascript function line here:
var bd = window.getBody();

Please help

Daniil
Oct 31, 2012, 6:47 PM
Hi @otouri,

Welcome to Ext.NET!

This code

OnClientClick="printGrid(#gpIncoming},# {PrintWindow});"

Is there a space between "#" and "{", right? Please remove.

otouri
Oct 31, 2012, 6:57 PM
Hello,
Thank you for your answer.
I double checked and this what I have on my code:
OnClientClick="printGrid(#{gpInitial}, #{PrintWindow});"

i have no space. Probably the space you see in the post is due to when i was formating it.

Thank you,

Daniil
Oct 31, 2012, 7:43 PM
I can pinpoint the error it breaks in the javascript function line here:
var bd = window.getBody();


What is the error?

Is the issue reproducible with the latest sources from SVN?
http://svn.ext.net/premium/branches/2.1/

otouri
Oct 31, 2012, 9:29 PM
This is
Microsoft JScript runtime error: Unable to set value of the property 'innerHTML': object is null or undefined.

What i am using is EXT.NET 2.0.

How do I get 2.1?

Daniil
Nov 01, 2012, 6:12 AM
This is
Microsoft JScript runtime error: Unable to set value of the property 'innerHTML': object is null or undefined.

Thank you. Though I am still unable to reproduce it.


How do I get 2.1?

The link is in my previous post.

You need SVN credentials. They had to be emailed to you when you got a Premium Support Subscription. Please check the Inbox. If they are lost, please send a request including your forum name to:
support@object.net

otouri
Nov 01, 2012, 1:29 PM
I got the SVn Credentials.
Could please post the path of the dlls i need. For this project I am using the following dlls:
Ext.Net
Ext.ney.Utilities
Newtonsoft.Json
Transformer.NET.
Thank you,

Daniil
Nov 01, 2012, 1:35 PM
There are no dlls. Please checkout the whole sources and build.

otouri
Nov 01, 2012, 1:48 PM
how do i download the source if i only see hyperlinks. what FTP tool would you recommend to access svn

Daniil
Nov 01, 2012, 1:55 PM
You need an SVN client. I use TortoiseSVN.

otouri
Nov 01, 2012, 1:56 PM
When I use WinSCP i get the following error:
The requested name is valid, but no data of the requested type was found.
Connection failed.
If i use just my broswer i am able to access it and browse through folders but can only download one file at a time. there mst be a way i could download the whole branche?

otouri
Nov 01, 2012, 1:59 PM
Thank you, i will download the tool and the branche, build the solution and get back to if i have any problem or was able to solve my intial issue.
please stay tuned.

Vladimir
Nov 01, 2012, 2:37 PM
Try this


function printGrid(grid, window, show) {
if (show !== false) {
window.show();
}
var bd = window.getBody();


if (!bd || !bd.document || !bd.document.body){
setTimeout(function () {
printGrid(grid, window, false);
}, 100);
return;
}


bd.document.body.innerHTML = grid.body.dom.innerHTML;
}

otouri
Nov 01, 2012, 2:41 PM
Compiled the code with no issues but as soon as i add the 4 dlls to my project i get the following error:


Could not load file or assembly 'Transformer.NET, Version=2.0.0.3590, Culture=neutral, PublicKeyToken=e274d618e7c603a7' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.IO.FileLoadException: Could not load file or assembly 'Transformer.NET, Version=2.0.0.3590, Culture=neutral, PublicKeyToken=e274d618e7c603a7' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

Source Error:
Line 16: </td>
Line 17: <td align="right">
Line 18: <ext:ResourceManager ID="ResourceManager1" runat="server" />
Line 19: </td>
Line 20: </tr>

I deleted the transformer.net dll from the new build and added the one from the old build and my project started working. but unfortunately my print button is still not working. my grid panel is displayed on the print popup only after the second click. on the first click it's blank.

otouri
Nov 01, 2012, 2:50 PM
you added a new parameter to the printGrid function (show)
should anything else change as well?

otouri
Nov 01, 2012, 2:55 PM
It's working thank you so much.
I had to add this into the print button:

OnClientClick="printGrid(#{gpInitial}, #{PrintWindow},#{True});"

one more problem when i printed the page it doen't not print all the gridpanel it only prints what is displayed in the popup. meaning if the popup ad a horizontal scroller than it does not display the rest of the data.

Daniil
Nov 01, 2012, 5:07 PM
I had to add this into the print button:

OnClientClick="printGrid(#{gpInitial}, #{PrintWindow},#{True});"


Please use "true" instead of "#{True}".

#{} syntax should be used to get a client reference to a widget by its server ID.



one more problem when i printed the page it doen't not print all the gridpanel it only prints what is displayed in the popup. meaning if the popup ad a horizontal scroller than it does not display the rest of the data.

I think you should set up a CSS for printing. A solution should be easy. I would google it searching for "javascript print scrollbar".

For example, this link:
http://stackoverflow.com/questions/5195225/unable-to-print-the-full-content-of-page-when-horizontal-scroll-bar-appears

otouri
Nov 01, 2012, 6:16 PM
I have tried different solution like:

<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" />
<style type="text/css" media="print">
#bodyprint
{
margin: 0;
writing-mode: tb-rl;
height: 95%;
}
</style>
</head>
<body id="bodyprint">
</body>
</html>

OR

<style type="text/css" media="print">
#bodyprint
{
width: 90%;
overflow:visible;
}
</style>

OR


<style type="text/css" media="print">
#bodyprint
{
width: 90%;
overflow:none;
}
</style>


none of these solution worked. please help
still

Vladimir
Nov 01, 2012, 6:30 PM
You can try this helper
https://github.com/loiane/extjs4-ux-gridprinter/tree/master/ux/grid