Grid - Print

[Pratheep]

Hi

it's possible get print with header  Title,Logo,Date,Address and footer page number 

please find the attachment 

Thanks

Pratheep

Attachment: DialogEditing_2bf43f7c.rar

[Prasanna Kumar Viswanathan]

Hi Pratheep,

Thanks for contacting Syncfusion support.

Yes, it is possible to print the Grid with Header, Footer, Logos and Page Number. We add an explicit row such as Copyrights in Footer and a logo in Header to the Grid on printing.

In the Grid’s toolbarClick event, a default action of Grid to print is prevented. You can obtain the currentElement of the Grid instance and pass it to the ej.print() method in order to process the print operation.

Please find the following code example, screenshot and sample,

<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True">

            <ToolbarSettings ShowToolbar="true" ToolbarItems="printGrid"></ToolbarSettings>

           <ClientSideEvents ActionComplete="complete" ToolbarClick="toolbar" />

            <Columns>

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" />

                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" />

                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" />

                <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" />

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" />

            </Columns>

        </ej:Grid>

    </div>

<label id="lblFooter" runat="server" class="copyrights">Copyright © 2001 - 2014 Syncfusion Inc. All Rights Reserved</label>

<label id="lblHeader" runat="server" class="header">Syncfusion</label>

    <img src="themes/download.png" class="image" />

    <style>

        .header{

            margin-left: 250px;

            font-family : Calibri;

            font-size : 35px;

        }       

    </style>

    <script type="text/javascript">

        function complete(e) {

            $('#<%= FlatGrid.ClientID %>').append($(".copyrights"));

            $('#<%= FlatGrid.ClientID %>').prepend($(".header"));

            $('#<%= FlatGrid.ClientID %>').prepend($(".image"));

        }

        function toolbar(args) {

            if (args.itemName == "Print") {

                args.cancel = true;

                var obj = $('#<%= FlatGrid.ClientID %>').data("ejGrid");

                var ele = obj.element.clone();

                ej.print(ele);

            }

        }
    </script>

Screenshot:



Sample Link: http://www.syncfusion.com/downloads/support/forum/120556/ze/DialogEditing1724307853

Refer to the below Knowledge Base for more details,

http://www.syncfusion.com/kb/2632/how-to-print-only-the-current-page-records-of-the-grid

Regards,
Prasanna Kumar N.S.V

[Pratheep]

Hi

grid Print button - it's possible to make server side event ( code behind event)

Thanks

Pratheep

[Prasanna Kumar Viswanathan]

Hi Pratheep,

Print Grid works in client side event only and not in server side event. For your convenience, we provided a workaround sample using AJAX post. In toolbarclick event, we use AJAX post and in success method we print the Grid.

Please find the code example and sample,

<div>

        <ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True">

            <ToolbarSettings ShowToolbar="true" ToolbarItems="printGrid"></ToolbarSettings>

            <ClientSideEvents ActionComplete="complete" ToolbarClick="toolbar" />

            <Columns>

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" />

                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" />

                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" />

                <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" />

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" />

            </Columns>

        </ej:Grid>

    </div>

------------------------------------------------------------------------------------

function toolbar(args) {

            if (args.itemName == "Print") {

                args.cancel = true;

                var data = { "name": "John Doe" }

                $.ajax({

                    type: "POST",

                    contentType: "application/json; charset=utf-8",

                    url: 'grid.aspx/GetCurrentTime',

                    data: JSON.stringify(data),

                    success: function (data) {

                        var obj = $('#<%= FlatGrid.ClientID %>').data("ejGrid");

                        var ele = obj.element.clone();

                        ej.print(ele);

                    },

                    fail :function(e){

                        alert(e);

                    }

                });

            }

        }

------------------------------------------------------------------------

[System.Web.Services.WebMethod]

        public static string GetCurrentTime(string name)

        {

            return "Hello " + name + Environment.NewLine + "The Current Time is: "

                + DateTime.Now.ToString();

        }

Sample Link: http://www.syncfusion.com/downloads/support/forum/120556/ze/DialogEditing_(2)-1136987885

Regards,

Prasanna Kumar N.S.V

[Pratheep]

Hi 

Working fine 

Thanks

Pratheep

[Prasanna Kumar Viswanathan]

Hi Pratheep,
 
We are happy that the provided solution working fine at your end.
 
Regards,
Prasanna Kumar N.S.V

[Laura Jordan]

Hi

I am using the sample to add a custom header to print the grid. But how can I hide toolbar and paging for printing?

Appreciate the support.

Thanks

[Vignesh Natarajan]

Hi Laura, 

Thanks for using Syncfusion products. 

We have analyzed your query and we suspect that you want to print the grid with custom header alone. We have achieved your requirement through BeforePrint event of the grid. 

Please refer the below code snippet 

               <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" /> 

                <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" /> 

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" /> 

            </Columns> 

   <ClientSideEvents BeforePrint="print" ActionComplete="complete" /> 

        </ej:Grid> 

    <img src="../Content/images/syncfusion.png" class="image" /> 

    <label id="lblHeader" runat="server" class="header">SYNCFUSION</label> 

                   . 

                   . 

                   .  

  

        function print(args) { 

            args.element.prepend($(".header")); 

            args.element.prepend($(".image")); 

        } 

    </script> 

Note: in Beforeprint event we have prepended the custom header to the Grid. 

   

Refer the below screenshot for the print window preview for your reference 

 

For your convenience we have prepared a sample which can be downloaded from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/120556/ze/SyncfusionASPNETApplication18-454011324  

Refer our online documentation for your reference 

https://help.syncfusion.com/api/js/ejgrid#events:beforePrint  

Regards, 

Vignesh Natarajan