This is a migrated thread and some comments may be shown as answers.

how to Print Grid Data With all paging ?

14 Answers 372 Views

Grid

This is a migrated thread and some comments may be shown as answers.

14 Answers, 1 is accepted

answered on 13 Aug 2010, 07:47 AM

I need to the following things......
1.Print all data column without scrolling image
2 It will work on all browser
3.Print Preview
4.if i binded data with web-service &cache command buttons Events not fire like edit,delete. (this is very important)

This is my code

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Testing.aspx.vb" Inherits="Aspen.Testing" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>Telerik Print Fucntion</title>

<telerik:RadCodeBlock runat ="server" ID= "ClientExport">

<script type = "text/javascript" >

function getOuterHTML(obj){

if (typeof (obj.outerHTML) == 'undefined')

{

var divWrapper = document.createElement("div");

var copyOb = obj.cloneNode(true);

divWrapper.appendChild(copyOb);

return divWrapper.innerHTML

}

else

return obj.outerHTML;

}

function PrintRadGrid( ){

var radGrid = $find('RadGrid1');

var previewWnd = window.open('about:blank', '', '', false);

var sh =

'<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",radGrid1.Skin)) %>';

var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";

var htmlcontent = styleStr + '<body>' + getOuterHTML($find('RadGrid1').get_element()) + '</body></html>';

previewWnd.document.open();

previewWnd.document.write(htmlcontent);

previewWnd.document.close();

previewWnd.print();

previewWnd.close();

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings >

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID ="btnExport">

<UpdatedControls >

<telerik:AjaxUpdatedControl ControlID ="btnExport" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging ="true"

Width="493px" >

<ExportSettings FileName ="Hello" Excel-FileExtension ="xls" OpenInNewWindow ="true" IgnorePaging ="true" ></ExportSettings>

<MasterTableView>

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

</telerik:RadGrid>

</div>

<input ID="btnPrint" runat="server" type="button" onclick="PrintRadGrid();" value="Print Grid Data5" />

</form>

</body>

</html>

answered on 23 Aug 2010, 04:08 PM

Hello Nanthakumar,

The code snippet below demonstrates how you can print the content of RadGrid client side:

<script type="text/javascript" language="javascript">

function printGrid()

{

var prWnd = window.open('about:blank', '', '', false); //Preview window

var sh =

'<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",RadGrid1.Skin)) %>'

;

var styleStr = "<head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";

var popupContent = styleStr + "<body>" + $find('<%= RadGrid1.ClientID %>').get_element().outerHTML + "</body>";

prWnd.document.open();

prWnd.document.write(popupContent);

prWnd.document.close();

prWnd.print();

}

</script>

<input value="Print RadGrid" type="button" onclick="printGrid()" />

I hope this helps.

Sincerely yours,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 03 Oct 2012, 09:51 AM

Hello,

The cause of the problem is that Chrome requires the page which is printed to be open when the print preview is configured.

You can use the following code in order to make the code library work under Chrome:

function PrintRadGrid()

{

var previewWnd = window.open('about:blank', '', '', false);

var sh =

'<%= ClientScript.GetWebResourceUrl(radGrid1.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",radGrid1.Skin)) %>'

;

var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";

var htmlcontent = styleStr + "<body>" + $find('<%= radGrid1.ClientID %>').get_element().outerHTML + "</body></html>";

previewWnd.document.open();

previewWnd.document.write(htmlcontent);

previewWnd.document.close();

previewWnd.print();

}

All the best,
Pavlina
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 03 May 2013, 11:29 AM

error.jpg

shouldlooklikethis.jpg

hi

i have issue of print problem i am using a rad grid and a print button on click of print button the code is
{

  btnRunReport_Click(null, null); // this is binding the grid content

RadAjaxPanel1.ResponseScripts.Add("PrintRadGrid('" + gvReportUnit.ClientID + "')");

 }      

and on aspx page the java script is 

 function PrintRadGrid(radGridId) {
                var radGrid = $find(radGridId);
                var previewWnd = window.open('about:blank', '', '', false);
                var sh = '<%= ClientScript.GetWebResourceUrl(gvReportUnit.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",gvReportUnit.Skin)) %>';
                var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";
                var htmlcontent = styleStr + "<body>" + radGrid.get_element().outerHTML + "</body></html>";
                previewWnd.document.open();
                previewWnd.document.write("<b><center>Custom Report</center></b>");
                previewWnd.document.write(htmlcontent);
                previewWnd.document.close();
                previewWnd.print();
                previewWnd.close();
            }
it is opening a new window instead open a popup for print
it should open a popup for print and the data should be inside that popup
Thanks
Pankaj

answered on 03 Sep 2014, 10:10 AM

image1.png

Sir,
On using Your Script,still i not getting the printable screen in chrome still its empty, after clicking Print Using system Dialog only it goes to print document popup after that only it showing data,until it does not show the data.

Thanking You
Giri

answered on 16 Jun 2016, 05:58 PM

Add setTimeout to call print():

<script type="text/javascript" language="javascript">

function PrintRadGrid() {

var previewWnd = window.open('about:blank', '', '', false);

var sh = '<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(), String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css", RadGrid1.Skin))%>';

var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";

var htmlcontent = styleStr + "<body>" + $find('<%= radGrid1.ClientID %>').get_element().outerHTML + "</body></html>";

previewWnd.document.open();

previewWnd.document.write(htmlcontent);

previewWnd.document.close();

setTimeout(function () {

previewWnd.print();

previewWnd.close();

}, 50);

return false;

}

</script>