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
Rank 2
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 |
| .... |
| <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.
Rank 1
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:
<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>
<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>
<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>
'''''''''
</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>
<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
Rank 1
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.
Rank 1
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.
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.
Rank 1
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.
Rank 1
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
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.
Rank 1
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 |
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?
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.
Rank 1
Tom.
Rank 1
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
Rank 2
Thank you.
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!
Rank 2
I tried to use the script above but it gave me error "ClientScript not declared".
Thanks.
Rank 2
You can try the same approach in the following code library.
Print RadGrid contents.
Thanks,
Princy.