[CLOSED] Print functionality for GridPanel

  1. #1

    [CLOSED] Print functionality for GridPanel

    Hi, We were using Ext.Net controls across our application. Now we would like to integrate print support in our application .i.e. We would like to print the datas displayed in the grid or the datas present in a form with various controls in a user friendly manner. For grid printing its just similar to the print functionality in customer address book which can be found here in the reports section.http://mvc.ext.net/ Any help or directions in this regard will be appreciable.
    Last edited by Daniil; Jul 18, 2011 at 2:48 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Unfortunately, you can print whole page only (or iframe)
    Therefore I suggest to create separate page for printing, in that page you can use similar page (or another data representation)
  3. #3

    Is it Possible as like in ASP.NET MVC

    Hi, In the ext.net controls for Asp.Net MVC there is an option for printing the entire grid under the reports section, you can refer to the attached image. We need a similar functionlity. Creating a new representation will not be a good solution. If you have any other ideas or controls kindly let me know as soon as possible.
    Attached Thumbnails Click image for larger version. 

Name:	Printing.jpg 
Views:	594 
Size:	90.5 KB 
ID:	2974  
  4. #4
    As Vladimir mentioned there is a separate page for the grid to print.

    Quote Originally Posted by Vladimir View Post
    I suggest to create separate page for printing
  5. #5
    Ih that sample, the report is placed inside iframe, you can print iframe without parent page (because iframe can be considered as separate page)
  6. #6

    Seperate Print Page

    Does we need to manually create the pages, or the grid panel is capable of rendering the rows in a seperate window. Kindly post your code to have a clear idea about that. We would like to write a generic method which will convert the datas in a grid to a seperate page in javascript.

    Quote Originally Posted by Vladimir View Post
    Ih that sample, the report is placed inside iframe, you can print iframe without parent page (because iframe can be considered as separate page)
  7. #7
    Hi,

    Grid has no ability to render the rows to seperate window
    Generic solution ca be difficult to implement (it is possible but requires a lot of codding, i am not ready to give any advice for generic solution now)
    You can get html of the grid using innerHTML property
    grid.el.dom.innerHTML
    and move it to iframe
    but it is required to copy css rules (it is main diffcult because we don't know what rules do you use)

    Here is very simple example (it is only example, it will not work in all cases)

    Page
    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.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" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    
    <!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 runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
    
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
            
            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>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <h1>Simple Array Grid</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            StripeRows="true"
            Title="Array Grid" 
            TrackMouseOver="true"
            Width="600" 
            Height="350"
            AutoExpandColumn="company">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="company" />
                                <ext:RecordField Name="price" Type="Float" />
                                <ext:RecordField Name="change" Type="Float" />
                                <ext:RecordField Name="pctChange" Type="Float" />
                                <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel 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:Button runat="server" Text="Print" OnClientClick="printGrid(#{GridPanel1}, #{PrintWindow});">    
        </ext:Button>
        
        <ext:Window ID="PrintWindow" runat="server" Width="700" Height="400" Hidden="true">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Print" Icon="Printer" OnClientClick="#{PrintWindow}.getBody().print();" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <AutoLoad Url="Child.aspx" Mode="IFrame">        
            </AutoLoad>
        </ext:Window>
    </body>
    </html>
    Child.aspx
    <%@ Page Language="C#" %>
     
    <%@ 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>
  8. #8

    can't get it to work

    Hello Vladimir,
    I tried your solution, on first time click of the print button I get the following error:
    "Microsoft JScript runtime error: Unable to set value of the property 'innerHTML': object is null or undefined"
    on second time it works. Please help i am using Ext.net Pro 2.0. I am stuck here since last week.
  9. #9
    Hi @otouri,

    I see you started a new thread.

    Just posting a link here for anyone who may be interested in.
    http://forums.ext.net/showthread.php?21748

Similar Threads

  1. [CLOSED] Import functionality.
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 21, 2012, 10:36 AM
  2. [CLOSED] Ext.Desktop functionality
    By ecko in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 10, 2012, 3:17 PM
  3. [CLOSED] How to print gridpanel with data?
    By Suntico in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 08, 2011, 6:19 PM
  4. Replies: 6
    Last Post: Feb 18, 2011, 2:12 PM
  5. [CLOSED] print
    By majestic in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 22, 2010, 2:53 PM

Tags for this Thread

Posting Permissions