How to Print RadGrid having MasterTableView

26 posts, 0 answers
  1. Pankaj
    Pankaj avatar
    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
    
    
  2. Shinu
    Shinu avatar
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pankaj
    Pankaj avatar
    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
  5. lm
    lm avatar
    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
  6. Kostadin
    Admin
    Kostadin avatar
    1711 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.

     
  7. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

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

    hi
    can i print hierarchy grid?
  8. lm
    lm avatar
    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
  9. Asutosh
    Asutosh avatar
    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
  10. Asutosh
    Asutosh avatar
    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 
  11. Kostadin
    Admin
    Kostadin avatar
    1711 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.

     
  12. Asutosh
    Asutosh avatar
    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

        


  13. Kostadin
    Admin
    Kostadin avatar
    1711 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.

     
  14. Asutosh
    Asutosh avatar
    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
  15. Asutosh
    Asutosh avatar
    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
  16. Shinu
    Shinu avatar
    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
  17. Asutosh
    Asutosh avatar
    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
  18. Shinu
    Shinu avatar
    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
  19. Asutosh
    Asutosh avatar
    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);

  20. Kostadin
    Admin
    Kostadin avatar
    1711 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.

     
  21. Asutosh
    Asutosh avatar
    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





  22. Asutosh
    Asutosh avatar
    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
  23. Kostadin
    Admin
    Kostadin avatar
    1711 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.

     
  24. Asutosh
    Asutosh avatar
    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?
  25. Kostadin
    Admin
    Kostadin avatar
    1711 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.

     
  26. jegan
    jegan avatar
    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 
  27. Kostadin
    Admin
    Kostadin avatar
    1711 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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017