Hi,
I'm new to the Telerik controls so please forgive any obvious questions!
I have a RadGrid that I am printing - this all works fine but my client has asked for their logo to be added to the printout. After some investigation I found a sample which had a Grid Header with an image displayed and this appeared in the printout. Trouble is even working through the sample I can't get it to work on my grid.
Essentially I need to colour the background of the header RED so that it blends in with the rest of the page the grid is on and have a right aligned image in the header. Simple as that but I just can't get the header to show up. Any pointers as to how to add a header to the grid?
I'm new to the Telerik controls so please forgive any obvious questions!
I have a RadGrid that I am printing - this all works fine but my client has asked for their logo to be added to the printout. After some investigation I found a sample which had a Grid Header with an image displayed and this appeared in the printout. Trouble is even working through the sample I can't get it to work on my grid.
Essentially I need to colour the background of the header RED so that it blends in with the rest of the page the grid is on and have a right aligned image in the header. Simple as that but I just can't get the header to show up. Any pointers as to how to add a header to the grid?
4 Answers, 1 is accepted
0
Jayesh Goyani
Top achievements
Rank 2
Rank 2
answered on 30 Jul 2012, 02:13 PM
Hello,
To set Background Color : http://www.telerik.com/community/forums/aspnet-ajax/grid/unable-to-set-background-color-of-header.aspx#2196381
To Set Image in header :
Thanks,
Jayesh Goyani
To set Background Color : http://www.telerik.com/community/forums/aspnet-ajax/grid/unable-to-set-background-color-of-header.aspx#2196381
To Set Image in header :
<telerik:GridBoundColumn HeaderImageUrl="~/images/myimage.png"> <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Right" /> </telerik:GridBoundColumn>Thanks,
Jayesh Goyani
0
Chris
Top achievements
Rank 1
Rank 1
answered on 30 Jul 2012, 02:30 PM
Should really have explained myself better.. I want an image to appear BEFORE / ABOVE the grid not in a column or the column headings. The reason for this is that my client wants to be able to print the grid but wants their logo to appear above the grid on the printout. As the image is to be right aligned, I need to fill the space with RED so that the image blends in with the page background.
I'm looking for something like the sample at
http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/pdfexport/defaultcs.aspx
I just don't see how the 'Sushi Bar' image is being added to the grid and hence how it is being printed.
I'm looking for something like the sample at
http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/pdfexport/defaultcs.aspx
I just don't see how the 'Sushi Bar' image is being added to the grid and hence how it is being printed.
0
Chris
Top achievements
Rank 1
Rank 1
answered on 30 Jul 2012, 03:08 PM
Looking at my Print function - which has come from this forum - I'm not sure that I am going down the correct routr. My print function is called on response to clicking a button and is as follows:-
function PrintRadGrid()
{
var previewWnd = window.open('about:blank', '', '', false);
var sh = '<%= ClientScript.GetWebResourceUrl(rgridResults.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",rgridResults.Skin)) %>';
var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";
var htmlcontent = styleStr
+ "<body>AAA<br /><img alt='Curve' src='http://176.56.61.101/mbrssportal/images/logo.png' /><br />BBBB"
+ $find('<%= rgridResults.ClientID %>').get_element().outerHTML + "</body></html>";
previewWnd.document.open();
previewWnd.document.write(htmlcontent);
previewWnd.document.close();
previewWnd.print();
previewWnd.close();
}
Note that I have attempted to add an image to the document prior to adding the content of the grid. This doesn't work however or at least nothing appears in the print preview. I do see the 'AAA' and 'BBB' but no image. Please any suggestions...
function PrintRadGrid()
{
var previewWnd = window.open('about:blank', '', '', false);
var sh = '<%= ClientScript.GetWebResourceUrl(rgridResults.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",rgridResults.Skin)) %>';
var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link></head>";
var htmlcontent = styleStr
+ "<body>AAA<br /><img alt='Curve' src='http://176.56.61.101/mbrssportal/images/logo.png' /><br />BBBB"
+ $find('<%= rgridResults.ClientID %>').get_element().outerHTML + "</body></html>";
previewWnd.document.open();
previewWnd.document.write(htmlcontent);
previewWnd.document.close();
previewWnd.print();
previewWnd.close();
}
Note that I have attempted to add an image to the document prior to adding the content of the grid. This doesn't work however or at least nothing appears in the print preview. I do see the 'AAA' and 'BBB' but no image. Please any suggestions...
0
Hi,
The image you are referring in the Export to PDF demo is added to the CommandItemTemplate of RadGrid with the following code:
and the code that actually prepares the images for exporting is the following one:
Give these suggestions a try and check whether you get the desired behavior.
Greetings,
Andrey
the Telerik team
The image you are referring in the Export to PDF demo is added to the CommandItemTemplate of RadGrid with the following code:
CommandItemTemplate><asp:Button ID="DownloadPDF" runat="server" Width="100%" CommandName="ExportToPdf"CssClass="pdfButton" /><asp:Image ID="Image1" runat="server" ImageUrl="Images/Backgr.jpg" AlternateText="Sushi Bar"Width="100%" /></CommandItemTemplate>and the code that actually prepares the images for exporting is the following one:
protected void FormatGridItem(GridItem item) { item.Style["color"] = "#eeeeee"; if (item is GridDataItem) { item.Style["vertical-align"] = "middle"; item.Style["text-align"] = "center"; } switch (item.ItemType) //Mimic RadGrid appearance for the exported PDF file { case GridItemType.Item: item.Style["background-color"] = "#4F4F4F"; break; case GridItemType.AlternatingItem: item.Style["background-color"] = "#494949"; break; case GridItemType.Header: item.Style["background-color"] = "#2B2B2B"; break; case GridItemType.CommandItem: item.Style["background-color"] = "#000000"; break; } if (item is GridCommandItem) { item.PrepareItemStyle(); //needed to span the image over the CommandItem cells } }Give these suggestions a try and check whether you get the desired behavior.
Greetings,
Andrey
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.