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

Radgrid back color change

3 Answers 26 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ashwitha
Top achievements
Rank 1
Ashwitha asked on 25 Sep 2014, 09:09 AM

            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

Sort by
0
Konstantin Dikov
Telerik team
answered on 30 Sep 2014, 07:00 AM
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:
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
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
0
Konstantin Dikov
Telerik team
answered on 30 Sep 2014, 10:59 AM
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:
<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.

 
Tags
Grid
Asked by
Ashwitha
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Ashwitha
Top achievements
Rank 1
Share this question
or