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. Image for the cookie policy date
close icon

Grid - Print

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

7 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team 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



PR Pratheep September 29, 2015 01:14 AM UTC

Hi

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

Thanks
Pratheep


PK Prasanna Kumar Viswanathan Syncfusion Team 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



PR Pratheep September 29, 2015 07:02 PM UTC

Hi 

Working fine 

Thanks

Pratheep


PK Prasanna Kumar Viswanathan Syncfusion Team 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


LJ Laura Jordan 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



VN Vignesh Natarajan Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon