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

How to Print RadGrid having MasterTableView

27 Answers 303 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pankaj
Top achievements
Rank 1
Pankaj asked on 13 May 2013, 06:57 AM
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

27 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 13 May 2013, 10:43 AM
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.
0
Pankaj
Top achievements
Rank 1
answered on 13 May 2013, 11:31 AM
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
0
lm
Top achievements
Rank 1
answered on 18 Jun 2014, 07:29 PM
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
0
Kostadin
Telerik team
answered on 23 Jun 2014, 10:57 AM
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.

 
0
Asutosh
Top achievements
Rank 1
answered on 24 Jun 2014, 12:35 PM
hi
can i print hierarchy grid?
0
lm
Top achievements
Rank 1
answered on 24 Jun 2014, 03:46 PM
I have support ticket submitted as well Support ID:830947. I am using latest version 2014
0
Asutosh
Top achievements
Rank 1
answered on 25 Jun 2014, 12:18 PM
how can i print hirarchy rad grid with all the data . i have paging but want to print all data
0
Asutosh
Top achievements
Rank 1
answered on 27 Jun 2014, 09:16 AM
can anybody tell me how to print hirarchical radgrid to printer ? we have deadline for our project 
0
Kostadin
Telerik team
answered on 27 Jun 2014, 10:37 AM
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.

 
0
Asutosh
Top achievements
Rank 1
answered on 30 Jun 2014, 05:57 AM
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

    


0
Kostadin
Telerik team
answered on 02 Jul 2014, 12:40 PM
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.

 
0
Asutosh
Top achievements
Rank 1
answered on 03 Jul 2014, 10:00 AM
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
0
Asutosh
Top achievements
Rank 1
answered on 05 Jul 2014, 10:42 AM
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
0
Shinu
Top achievements
Rank 2
answered on 07 Jul 2014, 05:15 AM
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
0
Asutosh
Top achievements
Rank 1
answered on 07 Jul 2014, 07:45 AM
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
0
Shinu
Top achievements
Rank 2
answered on 08 Jul 2014, 04:35 AM
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
0
Asutosh
Top achievements
Rank 1
answered on 08 Jul 2014, 05:51 AM
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);

0
Kostadin
Telerik team
answered on 08 Jul 2014, 07:38 AM
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.

 
0
Asutosh
Top achievements
Rank 1
answered on 08 Jul 2014, 08:43 AM
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





0
Asutosh
Top achievements
Rank 1
answered on 09 Jul 2014, 08:45 AM
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
0
Kostadin
Telerik team
answered on 11 Jul 2014, 07:02 AM
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.

 
0
Asutosh
Top achievements
Rank 1
answered on 11 Jul 2014, 07:15 AM
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?
0
Kostadin
Telerik team
answered on 15 Jul 2014, 11:23 AM
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.

 
0
jegan
Top achievements
Rank 1
answered on 16 Mar 2015, 03:02 PM
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 
0
Kostadin
Telerik team
answered on 19 Mar 2015, 09:42 AM
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.

 
0
Nguyen Huu
Top achievements
Rank 1
answered on 28 Jun 2019, 06:59 AM
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?

0
Peter Milchev
Telerik team
answered on 28 Jun 2019, 01:47 PM
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.
Tags
Grid
Asked by
Pankaj
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Pankaj
Top achievements
Rank 1
lm
Top achievements
Rank 1
Kostadin
Telerik team
Asutosh
Top achievements
Rank 1
jegan
Top achievements
Rank 1
Nguyen Huu
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or