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

RadGrid with Header and Image

4 Answers 331 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 30 Jul 2012, 11:59 AM
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?

4 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
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 :
<telerik:GridBoundColumn HeaderImageUrl="~/images/myimage.png">
                       <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Right" />
                   </telerik:GridBoundColumn>


Thanks,
Jayesh Goyani
0
Chris
Top achievements
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.
0
Chris
Top achievements
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...
0
Andrey
Telerik team
answered on 02 Aug 2012, 06:52 AM
Hi,

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.
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Chris
Top achievements
Rank 1
Andrey
Telerik team
Share this question
or