How to Print RadGrid having MasterTableView in UI for ASP.NET AJAX Grid

Pankaj

24 posts

Member since:
Apr 2013

Posted 13 May 2013 Link to this post

Hi All,

i have a rad grid in which i am assigning datasource on code behind , how to print this grid    

            <telerik:RadGrid Width="100%" HeaderStyle-Height="22px" HeaderStyle-HorizontalAlign="Left"
                    GridLines="Horizontal" DataKeyNames="UnitId" AutoGenerateColumns="false" AllowSorting="true"
                    MasterTableView-HierarchyDefaultExpanded="true" AllowPaging="false" ID="gvReportUnit"
                    runat="server" OnDetailTableDataBind="gvReportUnit_DetailTableDataBind" OnSortCommand="gvReportUnit_SortCommand">
                    <PagerStyle Mode="NumericPages"></PagerStyle>
                    <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                    </ClientSettings>
                    <MasterTableView AllowSorting="true" DataKeyNames="UnitId" Width="100%">
                        <Columns>
                            <telerik:GridBoundColumn DataField="UnitId" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="Unit ID" ItemStyle-CssClass="ItemStyle" ItemStyle-VerticalAlign="Top"
                                ItemStyle-HorizontalAlign="Left" SortExpression="UnitNameId" HeaderStyle-HorizontalAlign="Left"
                                ItemStyle-Width="100%">
                                <ItemTemplate>
                                    <%# Eval("UnitNameId") %>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                        <DetailTables>
                            <telerik:GridTableView AllowPaging="false" AutoGenerateColumns="false" AllowSorting="false"
                                GridLines="Horizontal" Width="100%" runat="server">
                            </telerik:GridTableView>
                        </DetailTables>
                    </MasterTableView>
                </telerik:RadGrid>

Thanks
Pankaj Agarwal

Shinu

17764 posts

Member since:
Mar 2007

Posted 13 May 2013 Link to this post

Hi Pankaj,

Please have a look at this code library project which demonstrates how to print the whole RadGrid excluding the surrounding controls/elements.

Thanks,
Shinu.

Pankaj

24 posts

Member since:
Apr 2013

Posted 13 May 2013 Link to this post

Hi Shinu ,

I already looked there but this code is not able to solve my problem because it is opening a new window , but i want to open a print popup

the code on print click 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(); }

thanks

lm

6 posts

Member since:
May 2013

Posted 18 Jun 2014 Link to this post

I have to same issue any solution. With Window.Open if the user clicks on the close button on top of the title bar then the parent window freezes. Please suggest some solution

Kostadin

Admin

1733 posts

Posted 23 Jun 2014 Link to this post

Hello,

Please make sure you are using the updated version of the code library. I just test it and on my side and it looks to work correctly. When I click the print button the print menu appear and allows me to print the grid. If I close the window by clicking the "x" button the print window disappear and the page refresh.

Regards,
Kostadin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asutosh

130 posts

Member since:
Sep 2013

Posted 24 Jun 2014 in reply to Kostadin Link to this post

hi
can i print hierarchy grid?

lm

6 posts

Member since:
May 2013

Posted 24 Jun 2014 in reply to Kostadin Link to this post

I have support ticket submitted as well Support ID:830947. I am using latest version 2014

Asutosh

130 posts

Member since:
Sep 2013

Posted 25 Jun 2014 Link to this post

how can i print hirarchy rad grid with all the data . i have paging but want to print all data

Asutosh

130 posts

Member since:
Sep 2013

Posted 27 Jun 2014 Link to this post

can anybody tell me how to print hirarchical radgrid to printer ? we have deadline for our project

Kostadin

Admin

1733 posts

Posted 27 Jun 2014 Link to this post

Hello Asutosh,

In order to export the hierarchical grid you could use the same code but you need to expand all items before printing the content. Regards the issue with exporting all data when having a paging, you need to remove the paging by setting AllowPaging to false and then print the grid.

Regards,
Kostadin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asutosh

130 posts

Member since:
Sep 2013

Posted 30 Jun 2014 in reply to Kostadin Link to this post

hi
i am using following code but its not working
html code
<asp:LinkButton ID="LinkButton2" runat="server" type="button" Text="[ Print Grid ]"
OnClientClick="PrintRadGrid(); return false;" Font-Underline="false" ForeColor="Black" />

button client side event

<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('<%= grd_forth_aco.ClientID %>');
var previewWindow = window.open('about:blank', '', '', false);
var styleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, grd_forth_aco.GetType(), String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css", grd_firstchart_aco.Skin)) %>';
var baseStyleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, grd_forth_aco.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>

button server side click event
protected void LinkButton2_Click(object sender, EventArgs e)
{
grd_forth_aco.MasterTableView.HierarchyDefaultExpanded = true;
grd_forth_aco.MasterTableView.DetailTables[0].HierarchyDefaultExpanded = true;
grd_forth_aco.MasterTableView.HierarchyLoadMode = GridChildLoadMode.Client;
grd_forth_aco.MasterTableView.DetailTables[0].HierarchyLoadMode = GridChildLoadMode.Client;
grd_forth_aco.AllowPaging = false;

RadAjaxPanel1.ResponseScripts.Add("PrintRadGrid('" + grd_forth_aco.ClientID + "')");
}
can you tell me how can i achieve that functionality

Kostadin

Admin

1733 posts

Posted 02 Jul 2014 Link to this post

Hi Asutosh,

A posslible solution is to use a HiddenFiled control to distinguish whether the print button is click and call the PrintRadGrid() function on client pageLoad event. For your convenience I prepared a small sample and attached it to this forum thread.

Regards,
Kostadin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

RowDoubleClick.zip

Asutosh

130 posts

Member since:
Sep 2013

Posted 03 Jul 2014 in reply to Kostadin Link to this post

hi
thanks for your reply
actually i have 6 grid in my page
so how can i make common PrintRadGrid() function at client side
and also i have common button to print all this grid
so how can i do that ?
please suggest me

Asutosh

130 posts

Member since:
Sep 2013

Posted 05 Jul 2014 in reply to Shinu Link to this post

hi shinu i am using kostadin attached code
in that there is print function in front end
now i have 18 grid in my page so hoe can i make common function for that?
and also i have common button to print that all grid

Shinu

17764 posts

Member since:
Mar 2007

Posted 07 Jul 2014 in reply to Asutosh Link to this post

Hi Asutosh,

You can include all the Grids in the print button click event access each grid and set its properties which are necessary. Please check the code snippet:

JS:

function PrintRadGrid() {

//Access all the Grids

var radGrid1 = $find('<%= RadGrid1.ClientID %>');

var radGrid2 = $find('<%= RadGrid2.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>";

//Add the contents of each Grid

htmlContent = htmlContent + "<body>" + getOuterHTML(radGrid1.get_element()) + "</body></html>";

htmlContent = htmlContent + "<body>" + getOuterHTML(radGrid2.get_element()) + "</body></html>";

previewWindow.document.open();

previewWindow.document.write(htmlContent);

previewWindow.document.close();

previewWindow.print();

if (!$telerik.isChrome) {

previewWindow.close();

}

C#:

//Print button click

protected void LinkButton2_Click(object sender, EventArgs e)

{

//Set properties for first grid

RadGrid1.MasterTableView.HierarchyDefaultExpanded = true;

RadGrid1.MasterTableView.DetailTables[0].HierarchyDefaultExpanded = true;

RadGrid1.MasterTableView.HierarchyLoadMode = GridChildLoadMode.Client;

RadGrid1.MasterTableView.DetailTables[0].HierarchyLoadMode = GridChildLoadMode.Client;

RadGrid1.AllowPaging = false;

RadGrid1.Rebind();

//Set properties for second grid

RadGrid2.MasterTableView.HierarchyDefaultExpanded = true;

RadGrid2.MasterTableView.DetailTables[0].HierarchyDefaultExpanded = true;

RadGrid2.MasterTableView.HierarchyLoadMode = GridChildLoadMode.Client;

RadGrid2.MasterTableView.DetailTables[0].HierarchyLoadMode = GridChildLoadMode.Client;

RadGrid2.AllowPaging = false;

RadGrid2.Rebind();

HiddenField1.Value = "true";

}

Thanks,
Shinu

Asutosh

130 posts

Member since:
Sep 2013

Posted 07 Jul 2014 in reply to Shinu Link to this post

hi
shinu i want to call that printgrid function from code behind because my grid is hierarchy and i have to make hierarchydefaultexpand = true
so how can i do that
i am using following code but it is not working
ScriptManager.RegisterStartupScript(this, typeof(Page), "Testing", "PrintRadGrid();", true);
and also i don't want to print all grid at a time

Shinu

17764 posts

Member since:
Mar 2007

Posted 07 Jul 2014 in reply to Asutosh Link to this post

HI Asutosh,

You can try the following code snippet to call the client side function and if you don't want to print all the Grids pass the ID's of the Grid you want to print.

C#:

string script = "function f(){PrintRadGrid('" + RadGrid1.ClientID + "'); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);

Thanks,
Shinu

Asutosh

130 posts

Member since:
Sep 2013

Posted 08 Jul 2014 in reply to Shinu Link to this post

hi shinu thanks for your reply
its work in my case
but the problem is i get only grid data not detail data so how can i get detail data in print
my script for printing is as below

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();
}
}
and i have used following code in my button click event

RadGrid1.MasterTableView.HierarchyDefaultExpanded = true;
RadGrid1.MasterTableView.DetailTables[0].HierarchyDefaultExpanded = true;
RadGrid1.MasterTableView.HierarchyLoadMode = GridChildLoadMode.Client;
RadGrid1.MasterTableView.DetailTables[0].HierarchyLoadMode = GridChildLoadMode.Client;
RadGrid1.AllowPaging = false;
RadGrid1.Rebind();
HiddenField1.Value = "true";
string script = "function f(){PrintRadGrid(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);

Kostadin

Admin

1733 posts

Posted 08 Jul 2014 Link to this post

Hi Asutosh,

You need to rebind the gird after you expand all detail tables and then print the grid. Note that if you register a startup script it will be executed before displaying all the tables. That is why you need to use the approach from my previous reply. Note that you could pass the grid in the hidden fields in order to export only some of the grids.

Regards,
Kostadin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asutosh

130 posts

Member since:
Sep 2013

Posted 08 Jul 2014 in reply to Kostadin Link to this post

hi kostdian
thanks for your reply
now that work fine in my end
but the problem is that i have grid in my radwindow and also i have print button also there
grid print work fine but problem is that after grid print my radwindow is not close
i have attached my grid screenshot
and also in your PrintRadGrid() function at client side
i have 6 grid in my page and i have diff print button for each grid
now in that i have to make 6 printradgrid() function to print that 6 grid at client side
how can i achieve functionality to print all grid using one printradgrid()?
and also i dont want to print all grid at a time i will it one by one

first.png

Asutosh

130 posts

Member since:
Sep 2013

Posted 09 Jul 2014 in reply to Shinu Link to this post

hi Shinu
thanks for your reply
now that work fine in my end
but the problem is that i have grid in my radwindow and also i have print button also there
grid print work fine but problem is that after grid print my radwindow is not close
i have attached my grid screenshot
and also in your PrintRadGrid() function at client side
i have 6 grid in my page and i have diff print button for each grid
now in that i have to make 6 printradgrid() function to print that 6 grid at client side
how can i achieve functionality to print all grid using one printradgrid()?
and also i dont want to print all grid at a time i will it one by one

first.png

Kostadin

Admin

1733 posts

Posted 11 Jul 2014 Link to this post

Hello,

Since the window is an iframe element when you open a new window to print the grid this might break some of its functionality and this could cause the issue with not closing the window. I am afraid I could not provide you with a proper solution for this scenario as there isn't an appropriate event where you could close the window manually. Regards the second issue you could pass the grid id as an argument of the PrintRadGrid() function.This way you will be able to reuse the print function for all RadGrids.

Regards,
Kostadin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asutosh

130 posts

Member since:
Sep 2013

Posted 11 Jul 2014 in reply to Kostadin Link to this post

HI
thanks for your reply
m sending grid name in that but in that function u have used 3 time grid name for "gridname.GetType()"
how can i use it dynamically?

Kostadin

Admin

1733 posts

Posted 15 Jul 2014 Link to this post

Hello Asutosh,

I am afraid that this could not be set dynamically and you have to use a different function for each grid as the GetType method is a server side one.

Regards,
Kostadin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

jegan

1 posts

Member since:
Oct 2014

Posted 16 Mar 2015 in reply to Kostadin Link to this post

Hi ,
I have referred your sample solution regarding the print option of RadGrid . Consider , If the scroll persist in the grid now the visible scroll area screen alone printing but we need to print all the elements in the grid (i.e,hided scroll area elements of grid also need to be Print)
> We don't need to expand all the child elements.
>Currently expanded items and hided items need to be print . Please give me the solution ASAP

thanks ,
Jegan .S

Printarea.png

Kostadin

Admin

1733 posts

Posted 19 Mar 2015 Link to this post

Hello Jegan,

In such case you have to disable the scrolling before printing the grid. Keep in mind that hiding the scroll does not require a rebind of the grid but have to be done on the server by setting AllowSorting to false. After that you have to execute the script that will print the grid.
Another possible solution is to use the export to PDF feature of the grid. Please check out the following live example.

Regards,
Kostadin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Nguyen Huu

5 posts

Member since:
Jun 2019

Posted 28 Jun 2019 in reply to Kostadin Link to this post

I have been searching for a method to print data in radGrid Telerik As following:

Code behind:

radGrid.CurrentPageIndex = 0;

radGrid.ClientSettings.Scrolling.AllowScroll = false;

radGrid.AllowPaging = false;

radGrid.AllowFilteringByColumn = false;

radGrid.MasterTableView.GroupsDefaultExpanded = true;

radGrid.Rebind();

foreach (GridItem item in radGrid.MasterTableView.GetItems(new GridItemType[] { GridItemType.Pager, GridItemType.FilteringItem }))

item.Display = false;

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

JavaScript:

function PrintRadGrid() {

var radGridE = $find('<%= radGrid.ClientID %>');

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

var styleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this.Page, radGrid.GetType(), String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css", radGrid.Skin)) %>';

var baseStyleSheet = '<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this.Page, radGrid.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(radGridE.get_element()) + "</body></html>";

previewWindow.document.open();

previewWindow.document.write(htmlContent);

previewWindow.document.close();

previewWindow.print();

if (!$telerik.isChrome) {

previewWindow.close();

}

The code is working well BUT it disables the Paging, FilteringItem and CommandItem to print all pages. Now I want a way to Paging, FilteringItem and CommandItem again without refreshing the page.

How to set Paging, FilteringItem and CommandItem to true again without refresh the page?

Peter Milchev

Admin

778 posts

Posted 28 Jun 2019 Link to this post

Hello Nguyen,

The Grid needs a postback in order to have enable/disable paging, so an additional postback is required to restore the paging.

Another option that would not require the additional postback is if you create and add another Grid with the same data and settings but with no Paging enabled, just for printing purposes. Then, once you call the printing function, you can hide this grid visually and set its Visible=false property on the next postback.

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.