We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid - Print

Thread ID:

Created:

Updated:

Platform:

Replies:

120556 Sep 25,2015 02:11 AM UTC Nov 14,2017 12:39 PM UTC ASP.NET Web Forms 7
loading
Tags: Grid
Pratheep
Asked On September 25, 2015 02:11 AM UTC

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 [Syncfusion]
Replied On September 25, 2015 08:58 AM UTC

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
Replied On September 29, 2015 01:14 AM UTC

Hi

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

Thanks
Pratheep

Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 29, 2015 12:01 PM UTC

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
Replied On September 29, 2015 07:02 PM UTC

Hi 

Working fine 

Thanks

Pratheep

Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 30, 2015 04:51 AM UTC

Hi Pratheep,
 
We are happy that the provided solution working fine at your end.
 
Regards,

Prasanna Kumar N.S.V

Laura Jordan
Replied On November 13, 2017 06:28 PM UTC

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 [Syncfusion]
Replied On November 14, 2017 12:39 PM UTC

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 

Refer our online documentation for your reference 


Regards, 
Vignesh Natarajan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;