function PrintPanel() {
var panel = document.getElementById("<%=ResponeData.ClientID %>");
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 500);
return false;
}
The above panel "ResponeData" has a rad grid. Im trying to print entire pannel. I want to change back color of the rad grid to "none" while printing. On print screen rad grid color should be none
3 Answers, 1 is accepted
0
Hello Ashwitha,
RadGrid is a complex control and has too many child elements that has style on their own, so setting background color only to the grid wrapping DIV element will not be enough. For achieving such custom requirement you will need to add some custom CSS class overriding all elements style for the background (image, color, etc.).
For getting reference to the grid wrapping DIV element and assigning custom CSS class you could use something like the code below:
Hope this helps.
Regards,
Konstantin Dikov
Telerik
RadGrid is a complex control and has too many child elements that has style on their own, so setting background color only to the grid wrapping DIV element will not be enough. For achieving such custom requirement you will need to add some custom CSS class overriding all elements style for the background (image, color, etc.).
For getting reference to the grid wrapping DIV element and assigning custom CSS class you could use something like the code below:
var grid = $find("<%=RadGrid1.ClientID%>");var gridElement = grid.get_element();if (gridElement.className.indexOf("customClass") < 0) { gridElement.className += " customClass";}Hope this helps.
Regards,
Konstantin Dikov
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.
0
Ashwitha
Top achievements
Rank 1
Rank 1
answered on 30 Sep 2014, 08:10 AM
Hey,
thanks for the reply
I have attached a screen shot
I want to change the back color of that grid to none
thanks for the reply
I have attached a screen shot
I want to change the back color of that grid to none
0
Hello Ashwitha,
As I have already mentioned in my previous post, how you manipulate the HTML elements generated from the grid before you print is up to you.
In my previous post you can also find how you can get reference to the DIV element wrapping the grid. As this is a standard DIV element you can use the style.background property of the element and set it to "none", so its background could be removed:
Once again, please note that if you have some custom styles to nested element you will have to manually remove their background.
Regards,
Konstantin Dikov
Telerik
As I have already mentioned in my previous post, how you manipulate the HTML elements generated from the grid before you print is up to you.
In my previous post you can also find how you can get reference to the DIV element wrapping the grid. As this is a standard DIV element you can use the style.background property of the element and set it to "none", so its background could be removed:
<telerik:RadCodeBlock ID="mainRadCodeBlock" runat="server"> <script type="text/javascript"> function pageLoad() { var grid = $find("<%=RadGrid1.ClientID%>"); var gridElement = grid.get_element(); gridElement.style.background = "none"; } </script></telerik:RadCodeBlock><telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource"></telerik:RadGrid>Once again, please note that if you have some custom styles to nested element you will have to manually remove their background.
Regards,
Konstantin Dikov
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.