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

How to print selected RadGrid row and add new link button in Command Item Template.

18 Answers 495 Views
Grid
This is a migrated thread and some comments may be shown as answers.
gc_0620
Top achievements
Rank 1
gc_0620 asked on 30 Dec 2009, 08:00 PM

Hello Everyone,

I am using RadControls for ASP.NET AJAX Q2 2009 SP1 with Visual Studio 2008 SP1.  I have a 2 level (Master/Detail) RadGrid. For my Project I am using the below Grid/Command Item Demo as a prototype. 

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/commanditem/defaultcs.aspx

My question's are:

1) How do I add a new LinkButton in command item template to Print individual row like Edit selected from above Grid Demo?
2) I would like if I click that print button, it will print Master as well as all related Detail rows for that selected row.

Any example or help will be appreciated. Thanks

18 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 31 Dec 2009, 06:34 AM
Hello gc_0620,

1) You can add a link button in the ComandItemTemplate as shown below:
aspx:
<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server"
      <MasterTableView Caption="Master Caption Text" CommandItemDisplay="Top"  DataSourceID="SqlDataSource1"
      <CommandItemTemplate> 
          <div style="padding: 5px 5px;"
            Custom command item template&nbsp;&nbsp;&nbsp;&nbsp; 
                .... &nbsp;             
             <asp:LinkButton ID="LinkButton1" runat="server" Text="Print Selected" OnClientClick="PrintRadGrid(); return false;" /> 
          </div> 
      </CommandItemTemplate>  
      <DetailTables > 
           <telerik:GridTableView Caption="Detail Caption Text" DataSourceID="SqlDataSource1" runat="server"
                  ... 

2) You can print the selected row and the associated detail table using the following code:
js:
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 detailTable = $find('<%= RadGrid1.ClientID %>').get_detailTables()[0];              
    var MasterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView(); 
    var selectedRows = MasterTable.get_selectedItems();   
     for (var i = 0; i < selectedRows.length; i++) 
      {   
            var row = selectedRows[i];   
            var  htmlcontent = htmlcontent + row.get_element().outerHTML  + detailTable.get_element().outerHTML;        
      }  
     
    htmlcontent = styleStr + "<body><div class='RadGrid RadGrid_Simple'>" +  htmlcontent + "</div></body></html>";      
    previewWnd.document.open(); 
    previewWnd.document.write(htmlcontent); 
    previewWnd.document.close(); 
    previewWnd.print(); 

Happy New Year!
Princy.
0
gc_0620
Top achievements
Rank 1
answered on 02 Jan 2010, 02:22 AM

Thanks Princy for your prompt response. Creating a link button in command template works perfectly as per your suggestion.

In my original post, I forgot to mention that I am using Form Template and I would like to Print Form Template Data instead of Master Table Columns Data. My mistake and sorry about that. I am using below Telerik Demo as proto type and my codes are also listed below.


http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/templateformupdate/defaultcs.aspx

My codes:

<MasterTableView DataKeyNames="JobId" DataSourceID="SqlDataSource1"  Name= "Master" CommandItemDisplay= "TopAndBottom">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<CommandItemTemplate>
 <div style="padding: 5px 5px;">
                        Custom command item template for Position Maintenance Grid: &nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:linkbutton id="btnEditSelected" runat="server" CommandName="EditSelected" Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/Edit.gif" /> Edit selected</asp:LinkButton>&nbsp;&nbsp;
                        <asp:linkbutton id="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible='<%# RadGrid1.EditIndexes.Count > 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/Update.gif" /> Update</asp:LinkButton>&nbsp;&nbsp;
 <asp:linkbutton id="btnPrint" runat="server" CommandName="Print"  OnClientClick="PrintRadGrid(); return false;"><img style="border:0px;vertical-align:middle;" alt="" src="Images/Print.gif" /> Print</asp:LinkButton>&nbsp;&nbsp;
                       
                        '''''''''
                      
                    </div>
                </CommandItemTemplate>
    <Columns>
       
        <telerik:GridBoundColumn DataField="Division" HeaderText="Div"
            SortExpression="Division" UniqueName="Division">
            <HeaderStyle Width="8%" />
            <ItemStyle Width="8%" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Program" HeaderText="Program"  
            SortExpression="Program" UniqueName="Program">
            <HeaderStyle Width="24%" />
            <ItemStyle Width="24%" />
                    </telerik:GridBoundColumn>
       
       ''''''
       
      
    </Columns>
    <EditFormSettings EditFormType="Template">
    <FormTemplate>
   
    <table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
                            style="border-collapse: collapse; background: white">
                            <tr>
                                                        <td colspan="2">
                                <asp:Label ID="JobDetailLabel"  runat="server" 
                                font-size="Smaller" Font-Underline="True" ForeColor="#FBA16C"
        Font-Names="Arial Rounded MT Bold"
                                ></asp:Label> 
                                <br />
                            </tr>
                           <tr>
                         <td></td>
                           </tr> <td></td><tr>
                        
                           </tr>
                            <tr>
                                <td>
                                    <table id="Table3"  border="0" class="module">
                                       
                                        <tr>
                                             <td>
                                                Division:</td>
                                            <td>
                                                <asp:textbox id="TxtDivision" runat="server" text='<%# Bind( "Division") %>' tabindex="1">
                                                </asp:textBox>
                                               
                                               <asp:RequiredFieldValidator ID="JobTypeTextBoxRequiredFieldValidator" ControlToValidate="TxtDivision"
                                    ErrorMessage="! Required"  runat="server">
                                </asp:RequiredFieldValidator> </td>
                                               <td>
                                                Program:</td>
                                            <td>
                                            <telerik:RadComboBox runat="server"   tabindex="2"
                                                ID="RadComboBox2"
                                                DataTextField="Program"
                                                DataValueField="Program" Skin="Office2007"
                                                HighlightTemplatedItems="true"
                                                Height="150px"
                                                Width="372px" MarkFirstMatch = "true"
                                                DropDownWidth="369px"
                                                DataSourceID="SqlDataSource2"
                                                SelectedValue='<%#Bind("Program") %>'>
                                                <HeaderTemplate>
                                               
                                                <table style="width: 345px" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td style="width: 230px;">
                                            Program</td>
                                        <td style="width: 55px;">
                                            Location</td>
                                            <td style="width: 70px;">
                                            Payroll Code</td>
                                      
                                    </tr>
                                </table>

                                               
</HeaderTemplate>
<ItemTemplate>
 <table style="width: 345px" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td style="width: 230px;">
                                           <%# DataBinder.Eval(Container.DataItem, "Program") %>
                                        </td>
                                        <td style="width: 55px;">
                                            <%# DataBinder.Eval(Container.DataItem, "Location") %>
                                        </td>
                                    <td style="width: 70px;">
                                            <%# DataBinder.Eval(Container.DataItem, "PayrollCode") %>
                                        </td>
                                       
                                    </tr>
                                </table>

</ItemTemplate>

</telerik:RadComboBox>
                               
                                                </td>
                                               
                                               
                                       
                                        <tr>
                                        <td></td></tr>
                                        <td colspan="2">
                                <asp:Label ID="InternalLogLabel" 
                                 font-size="Smaller" Font-Underline="True" ForeColor="#FBA16C"
        Font-Names="Arial Rounded MT Bold"
                               
                                    runat="server" text="Internal Log"
       
      
               ></asp:Label> 
               <br />
                               
                            </tr>
                           <tr>
                         <td></td>
                           </tr> <td></td><tr>
                        
                           </tr>
                                          <td>
                                                Creator:</td>
                                            <td>
                                                <asp:textbox id="Textbox5" text='<%# Bind( "Creator") %>' runat="server"  Enabled = "false" >
                                                </asp:textBox></td>   
                                                 <td>
                                                Creation Date:</td>
                                            <td>
                                                <asp:textbox id="Textbox6" text='<%# Bind( "CreationDate") %>' runat="server" Enabled = "false" >
                                                </asp:textBox></td>   
                                                                                       </tr>
                                        <tr>
                                           <td>
                                                Last Updator:</td>
                                            <td>
                                                <asp:textbox id="Textbox7" text='<%# Bind( "LastUpdator") %>' runat="server" Enabled = "false">
                                                </asp:textBox></td>   
                                                 <td>
                                                Last Update Date:</td>
                                            <td>
                                                <asp:textbox id="Textbox8" text='<%# Bind( "LastUpdateDate") %>' runat="server" ForeColor="Beige"  Enabled= "false">
                                                </asp:textBox></td>    
                                        </tr>
                                       
                                    </table>
                                </td>
                              
                              
                            </tr>
                            <tr>
                                <td align="right" colspan="2">
                                    <asp:Button ID="btnUpdate"    CssClass="form-button"   text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                        runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                    </asp:Button>&nbsp;
<asp:Button ID="btnCancel" text="Cancel" CssClass="form-button" runat="server" CausesValidation="False"
CommandName="Cancel"></asp:Button></td>
                            </tr>
                        </table>
   
    </FormTemplate>
    </EditFormSettings>
</MasterTableView>

My questions are:

1) Is it possible from Command Item Print link button Onclientclick event, print the Tabular Data as they appears in above Telerik Demo Form Template Edit Mode (i.e. same format of row labels and data with surrounding boxes)? 

2) How do I hide Command items/Link Buttons from the exported document via Java script Onclientclick event? I know as per below Telerik Documentation link I can remove them on click event while exporting to Excel.


http://www.telerik.com/help/aspnet-ajax/grdexporttipstricks.html

3) Is it possible to print Radgrid selected row as well as related child rows (if any) via Telerik Reporting (i.e. Invoke report with selected row as Parameter and show the report in a separate window)?

Thanks again for your prompt response, Appreciated. Happy new year to you as well.

GC_0620

 

 

 

0
gc_0620
Top achievements
Rank 1
answered on 05 Jan 2010, 08:08 PM
Any suggestions how to implement the issues that I posted in post#3? Thanks
0
Iana Tsolova
Telerik team
answered on 08 Jan 2010, 11:44 AM
Hi gc_0620,

Indeed, on the client there is no such an easy way to access the edit form. You can try achieving it by traversing the grid DOM element though. 
Regarding the CommandItem buttons: You can find them by their ClientIDs and set their visibility style to hidden.
For more information on Telerik Reporting, please check out this article.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Tom Miller
Top achievements
Rank 1
answered on 20 May 2010, 10:50 AM
Hi,

Thanks very much for this post.  I've implemented as suggested which works fine in IE but returns NaN in Firefox.  Do you have any idea why this might be?

Thanks in advance,

Tom.
0
Iana Tsolova
Telerik team
answered on 20 May 2010, 02:39 PM
Hi Tom,

Could you please share the exact code your are using?
I will check it out and turn back to you with my finding.

Regards,
Iana
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.
0
Tom Miller
Top achievements
Rank 1
answered on 20 May 2010, 02:47 PM
Hi Iana,

Many thanks for the quick response.  The code I'm using is as follows:

    function PrintRadGrid()
    {
        var previewWnd = window.open('about:blank', '', '', false);
        var sh = '<%= ClientScript.GetWebResourceUrl(radIssuesGrid.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",radIssuesGrid.Skin)) %>';
        var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";
        var detailTable = $find('<%= radIssuesGrid.ClientID %>').get_detailTables()[0];              
        var MasterTable = $find('<%= radIssuesGrid.ClientID %>').get_masterTableView();
        var selectedRows = MasterTable.get_selectedItems();   
        for (var i = 0; i < selectedRows.length; i++)
        {   
            var row = selectedRows[i];   
            var  htmlcontent = htmlcontent + row.get_element().outerHTML  + detailTable.get_element().outerHTML;        
        }  
         
        htmlcontent = styleStr + "<body><div class='RadGrid RadGrid_Simple'>" +  htmlcontent + "</div></body></html>";      
        previewWnd.document.open();
        previewWnd.document.write(htmlcontent);
        previewWnd.document.close();
        previewWnd.print();
    } 

Kind Regards,

Tom.



0
ravindar kasarla
Top achievements
Rank 1
answered on 24 May 2010, 05:10 PM
Hi

I am not expert is VB or C#.

Recenlty we started working on SSRS Reports. but SSRS has no scuh functionality so decided to created couple of reports in VB where Print Selected rows functionality needed.

I have Created Datagrid and Templete field Check box.

Could anybody help me what code should I use in VB to provide the user with the Print selected rows functionality.


Any suggestion would be greatly appreciated.

Thanks
Ravi
0
Iana Tsolova
Telerik team
answered on 25 May 2010, 04:43 PM
Hi,

In response of Tom:
Try modifying the javascript code as below and let me know if it works in both browsers now:

<script type="text/javascript">
    function PrintRadGrid() {
        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 MasterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
        var selectedRows = MasterTable.get_selectedItems();
        var htmlcontent = "<table>";
        for (var i = 0; i < selectedRows.length; i++) {
            var row = selectedRows[i];                
            htmlcontent = htmlcontent + "<tr>" + row.get_element().innerHTML + "</tr>";
        }
        htmlcontent = styleStr + "<body><div class='RadGrid RadGrid_Simple'>" + htmlcontent + "</table></div></body></html>";
        var previewWnd = window.open('about:blank', '', '', false);
        previewWnd.document.open();
        previewWnd.document.write(htmlcontent);
        previewWnd.document.close();
        previewWnd.print();
    }   
</script>

In response to ravindar:
The code used for printing the grid is a client-side code (javascript). Feel free to try it for your case either.

Sincerely yours,
Iana
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.
0
Tom Miller
Top achievements
Rank 1
answered on 27 May 2010, 01:21 PM
Hi,

Thanks for your reply.  This did work in firefox but it didn't render the detail table.  I altered the code you provided to the below:-

    function PrintRadGrid()
    {
        var sh = '<%= ClientScript.GetWebResourceUrl(radIssuesGrid.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",radIssuesGrid.Skin)) %>';
        var styleStr = "<html><head><link href='" + sh + "' rel='stylesheet' type='text/css'></link></head>";
        var masterTable = $find("<%=radIssuesGrid.ClientID %>").get_masterTableView();
        var detailTable = $find("<%=radIssuesGrid.ClientID %>").get_detailTables()[0];
        var selectedRows = masterTable.get_selectedItems();
        var htmlContent;
        for (var i = 0; i < selectedRows.length; i++)
        {
            var row = selectedRows[i];
            htmlContent = htmlContent + "<table><tr>" + row.get_element().innerHTML + "</tr></table>";
            htmlContent = htmlContent + detailTable.get_element().outerHTML;
        }
        htmlcontent = styleStr + "<body><div class='RadGrid RadGrid_Simple'>" + htmlContent + "</div></body></html>";
        var previewWnd = window.open('about:blank', '', '', false);
        previewWnd.document.open();
        previewWnd.document.write(htmlContent);
        previewWnd.document.close();
        previewWnd.print();        
    }

This works fine in IE but I receive undefined followed by the row from the master table followed by undefined again:-

undefined
test issue for ......
Edit First Raised: 19/05/2010 Due Date: 29/10/2010 Add new action
undefined

It also strange that when I check the source of the page in firefox it's missing the html, head and body tags but in ie everything seems fine.

Any ideas?
0
Iana Tsolova
Telerik team
answered on 02 Jun 2010, 09:21 AM
Hi Tom,

I modified the code so it works for two level hierarchy:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function PrintRadGrid() {
    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 MasterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
    var selectedRows = MasterTable.get_selectedItems();
    var htmlcontent = "<table>";
    for (var i = 0; i < selectedRows.length; i++) {
        var row = selectedRows[i];
        htmlcontent = htmlcontent + "<tr>" + row.get_element().innerHTML + "</tr>";
        if (row.get_nestedViews().length > 0) {
            var nestedSelectedRows = row.get_nestedViews()[0].get_selectedItems();
            for (var j = 0; j < nestedSelectedRows.length; j++) {
                var nestedRow = nestedSelectedRows[j];
                htmlcontent = htmlcontent + "<tr>" + nestedRow.get_element().innerHTML + "</tr>";
            }
        }
    }
  
    htmlcontent = styleStr + "<body><div class='RadGrid RadGrid_Simple'>" + htmlcontent + "</table></div></body></html>";
                  
    var previewWnd = window.open('about:blank', '', '', false);
    previewWnd.document.open();
    previewWnd.document.write(htmlcontent);
    previewWnd.document.close();
    previewWnd.print();
  
}   
</script>
</telerik:RadCodeBlock>

You can also find attached a runnable sample to this post.

Kind regards,
Iana
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.
0
Tom Miller
Top achievements
Rank 1
answered on 02 Jun 2010, 10:15 AM
Thank you very much! Much appreciated! Works great.

Tom.
0
Chintan
Top achievements
Rank 1
answered on 17 Aug 2010, 07:44 PM
Is it possible to print selected columns ? If yes, can you please give us source code. We have pretty huge grid with 100 columns and we are not able to print everything in Rad Grid.
0
Iana Tsolova
Telerik team
answered on 19 Aug 2010, 10:32 AM
Hi Chintan,

The RadGrid columns are rendered as <td> elements. So in order to achieve your goal, you can strip the odd columns html from the rows. For that purpose you can first hide the desired columns, then split the row html to get all the cells and re-join then omitting the td elements with style="display:none" for instance.

I hope this helps.

All the best,
Iana
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
0
illumination
Top achievements
Rank 2
answered on 08 Jul 2011, 07:52 PM
I have the same issue as Chintan. Would you please provide the code to print selected RadGrid row in MasterTable only?
Thank you.
0
Iana Tsolova
Telerik team
answered on 13 Jul 2011, 11:26 AM
Hello Illumination,

Try removing the code for the nested views:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function PrintRadGrid() {
    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 MasterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
    var selectedRows = MasterTable.get_selectedItems();
    var htmlcontent = "<table>";
    for (var i = 0; i < selectedRows.length; i++) {
        var row = selectedRows[i];
        htmlcontent = htmlcontent + "<tr>" + row.get_element().innerHTML + "</tr>";
    }
    htmlcontent = styleStr + "<body><div class='RadGrid RadGrid_Simple'>" + htmlcontent + "</table></div></body></html>";
    var previewWnd = window.open('about:blank', '', '', false);
    previewWnd.document.open();
    previewWnd.document.write(htmlcontent);
    previewWnd.document.close();
    previewWnd.print();
}
</script>
</telerik:RadCodeBlock>


Regards,
Iana
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

0
illumination
Top achievements
Rank 2
answered on 13 Jul 2011, 01:44 PM
Lana,
I tried to use the script above but it gave me error "ClientScript not declared".
Thanks.
0
Princy
Top achievements
Rank 1
answered on 14 Jul 2011, 10:14 AM
Hello,

You can try the same approach in the following code library.
Print RadGrid contents.

Thanks,
Princy.
Tags
Grid
Asked by
gc_0620
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
gc_0620
Top achievements
Rank 1
Iana Tsolova
Telerik team
Tom Miller
Top achievements
Rank 1
ravindar kasarla
Top achievements
Rank 1
Chintan
Top achievements
Rank 1
illumination
Top achievements
Rank 2
Share this question
or