Hii, I am going to tell you that how you can Print RadGrid as paging enabled.Generally when we print Radgrid then it prints only that data which is visible to you ,Means it will print only that page data..To print the whole data inside RadGrid so Lets Have some Code
We have to take RadAjaxPanel for that
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<div class="wrapper">
<div class="topBar">
<p class="headingText">
<asp:LinkButton ID="LinkButton1" runat="server" type="button" Text="[ Print Grid ]"
OnClick="LinkButton1_Click" Font-Underline="false" ForeColor="Black" /></p>
This code-library demonstrates how to print RadGrid without surrounding content<br />
</div>
<telerik:RadGrid ID="radGrid1" runat="server" Skin="Simple" DataSourceID="SqlDataSource1"
Style="margin: 20px;" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True"
GridLines="None">
</telerik:RadGrid>
</div>
</telerik:RadAjaxPanel>
Now in Javascript code
<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.ClientID %>');
var previewWindow = window.open('about:blank', '', '', false);
var styleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, radGrid1.GetType(), String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css", radGrid1.Skin)) %>';
var baseStyleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, radGrid1.GetType(), "Telerik.Web.UI.Skins.Grid.css") %>';
var htmlContent = "<html><head><link href = '" + styleSheet + "' rel='stylesheet' type='text/css'></link>";
htmlContent += "<link href = '" + baseStyleSheet + "' rel='stylesheet' type='text/css'></link></head>";
htmlContent = htmlContent + "<body>" + getOuterHTML(radGrid.get_element()) + "</body></html>";
previewWindow.document.open();
previewWindow.document.write(htmlContent);
previewWindow.document.close();
previewWindow.print();
if (!$telerik.isChrome) {
previewWindow.close();
}
}
</script>
And Finally the Code in .Cs Page.
protected void LinkButton1_Click(object sender, EventArgs e)
{
radGrid1.AllowPaging = false;
radGrid1.Rebind();
foreach (GridItem item in radGrid1.MasterTableView.GetItems(new GridItemType[] { GridItemType.Pager, GridItemType.FilteringItem }))
item.Display = false;
RadAjaxPanel1.ResponseScripts.Add("PrintRadGrid('" + radGrid1.ClientID + "')");
}
protected void radGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
if (e.CommandName == "EnablePaging")
{
radGrid1.AllowPaging = true;
radGrid1.Rebind();
}
}
We have to take RadAjaxPanel for that
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<div class="wrapper">
<div class="topBar">
<p class="headingText">
<asp:LinkButton ID="LinkButton1" runat="server" type="button" Text="[ Print Grid ]"
OnClick="LinkButton1_Click" Font-Underline="false" ForeColor="Black" /></p>
This code-library demonstrates how to print RadGrid without surrounding content<br />
</div>
<telerik:RadGrid ID="radGrid1" runat="server" Skin="Simple" DataSourceID="SqlDataSource1"
Style="margin: 20px;" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True"
GridLines="None">
</telerik:RadGrid>
</div>
</telerik:RadAjaxPanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT * from Subject_tab">
</asp:SqlDataSource>
<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.ClientID %>');
var previewWindow = window.open('about:blank', '', '', false);
var styleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, radGrid1.GetType(), String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css", radGrid1.Skin)) %>';
var baseStyleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, radGrid1.GetType(), "Telerik.Web.UI.Skins.Grid.css") %>';
var htmlContent = "<html><head><link href = '" + styleSheet + "' rel='stylesheet' type='text/css'></link>";
htmlContent += "<link href = '" + baseStyleSheet + "' rel='stylesheet' type='text/css'></link></head>";
htmlContent = htmlContent + "<body>" + getOuterHTML(radGrid.get_element()) + "</body></html>";
previewWindow.document.open();
previewWindow.document.write(htmlContent);
previewWindow.document.close();
previewWindow.print();
if (!$telerik.isChrome) {
previewWindow.close();
}
}
</script>
And Finally the Code in .Cs Page.
protected void LinkButton1_Click(object sender, EventArgs e)
{
radGrid1.AllowPaging = false;
radGrid1.Rebind();
foreach (GridItem item in radGrid1.MasterTableView.GetItems(new GridItemType[] { GridItemType.Pager, GridItemType.FilteringItem }))
item.Display = false;
RadAjaxPanel1.ResponseScripts.Add("PrintRadGrid('" + radGrid1.ClientID + "')");
}
protected void radGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
if (e.CommandName == "EnablePaging")
{
radGrid1.AllowPaging = true;
radGrid1.Rebind();
}
}
Good Job!
ReplyDeleteIt is working. But how to enable Paging back again???
What will fire "radGrid1_ItemCommand" event ?? This event is not fired!
How to enable Paging again without refreshing the page?
I had the same problem/question as the above comment. This is how I fix it:
ReplyDeleteAdd a function:
function RefreshGrid() {
var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
masterTable.rebind();
}
Code Behind:
RadAjaxPanel1.ResponseScripts.Add("RefreshGrid('" + RadGrid1.ClientID + "')");