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