SharePoint Consulting Blog

Showing posts with label HTML. Show all posts

November 23, 2016

Default Print button in SSRS Report is not showing/working in Chrome and Firefox browsers

Scenario

SSRS toolbox provides Print functionality. But it's browser dependent. It works fine only with Internet Explorer browser, not compatible with Firefox and Chrome browsers.

Resolution
To achieve this, we've to use custom Print button and JavaScript code which executes on button click.

HTML code for Print button and Report viewer:

 <asp:Button runat="server" CssClass="btn-addschedule-bot" Style="margin-left: 10px;" ID="btnPrint" CausesValidation="true" ValidationGroup="vgSubmit" OnClientClick="printReportClick();" Text="Print Report" />  
 <div style="border: 1px solid #A7B0E8; margin: 0px 10px; padding: 5px; float: left;">  
 <rsweb:ReportViewer ID="rptViewer" runat="server" Height="500px" Style="-ms-overflow-y: scroll" Width="1100px" ShowToolBar="False" ShowParameterPrompts="False" ShowCredentialPrompts="False"></rsweb:ReportViewer>  
 </div>

JavaScript Code to print a report in Chrome and Firefox:

 <script type="text/javascript">  
     function printReport(report_ID) {  
       var rv1 = $('#' + report_ID);  
       var iDoc = rv1.parents('html');  
       // Reading the report styles  
       var styles = iDoc.find("head style[id$='ReportControl_styles']").html();  
       if ((styles == undefined) || (styles == '')) {  
         iDoc.find('head script').each(function () {  
           var cnt = $(this).html();  
           var p1 = cnt.indexOf('ReportStyles":"');  
           if (p1 > 0) {  
             p1 += 15;  
             var p2 = cnt.indexOf('"', p1);  
             styles = cnt.substr(p1, p2 - p1);  
           }  
         });  
       }  
       if (styles == '') { alert("Cannot generate styles, Displaying without styles.."); }  
       styles = '<style type="text/css">' + styles + "</style>";  
       //--- Reading the report html  
       var table = rv1.find("div[id$='_oReportDiv']");  
       if (table == undefined) {  
         alert("Report source not found.");  
         return;  
       }  
       //-- Generating a copy of the report in a new window  
       var docType = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">';  
       var docCnt = styles + table.parent().html();  
       var docHead = '<head><title>Printing ...</title><style>body{margin:5;padding:0;}</style></head>';  
       var winAttr = "location=yes, statusbar=no, directories=no, menubar=no, titlebar=no, toolbar=no, dependent=no, width=720, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes";;  
       var newWin = window.open("", "_blank", winAttr);  
       writeDoc = newWin.document;  
       writeDoc.open();  
       writeDoc.write(docType + '<html>' + docHead + '<body onload="window.print();">' + docCnt + '</body></html>');  
       writeDoc.close();  
       // The print event will fire as soon as the window loads  
       newWin.focus();  
       // uncomment to autoclose the preview window when printing is confirmed or canceled.  
       // newWin.close();  
     };  
     function printReportClick() {  
       printReport('<%=rptViewer.ClientID %>');  
     }  
   </script>

Print Preview in Chrome browser:

I hope this will help you out to make print functionality working in Chrome and Firefox.

If you have any questions you can reach out our SharePoint Consulting team here.

January 7, 2013

Tabs in SharePoint 2010 Using Jquery

First Create Simple aspx page in Sharepoint Designer. Add two placeholder First one additional page head Its holding any css and jQuery Scripts. Second one "> Place the Css and jQuery Script in additional Head Here is Script and Css :
Note: you have to give jquery.js file reference in head

<script type="text/javascript" src="/Style Library/js/jquery.js"></script>

Tab Structure :

<ul class="div-nav">

<li class="choice show-hs activated">High School</li>

<li class="choice show-ms">Middle School</li>

<li class="choice show-es">Elementary School</li>

</ul>

Hide and Show Div Structure :

<div class="content">

<div class="calendar">

<div class="webpart hs"></div>

<div class="webpart ms"></div>

<div class="webpart es"></div>

</div></div>

Additional Script :

For Hide All Divs.

    $("#daily-wrapper .webpart").hide();

Show First Div when loading page.

   $("#daily-wrapper .hs").fadeIn('slow');

Tab Selected Class.

   $("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});

Remove Class when other one select.

   $("ul.div-nav li.choice").click(function(){$(this).siblings('ul.div-nav li').removeClass('activated')});

Here is the Full Code
you have to add Style & script in additional Head :

<style type="text/css">

#daily-wrapper{ border:solid 4px#999;width:500px;}

#daily-wrapper ul.div-nav li {font-size:1.2em;margin:0px;border-right:1px solid #fff;}

#daily-wrapper .calendar {position:relative;border:0px solid #333;float:left;}

#daily-wrapper .calendar {margin-right:19px;}

#daily-wrapper .content .calendar h2 {color:#000;margin-bottom:20px;}

ul.div-nav {width:100%;background:#999;float:left;text-align:center;padding:0px;margin:0px;}

ul.div-nav li {display:block;float:left;color:#fff;text-decoration:none;padding:10px;}

ul.div-nav li:hover {background:#b80000;cursor:pointer;}

ul.div-nav li.activated {background:#b80000;}

</style>

<script type="text/javascript">

$("ul.div-nav").ready(function(){

 $("#daily-wrapper .webpart").hide();

 $("#daily-wrapper .hs").fadeIn('slow');

 $("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});

 $("ul.div-nav li.choice").click(function(){$(this).siblings('ul.div-nav li').removeClass('activated')});

 $("ul.div-nav li.choice").click(function(){$("#daily-wrapper .webpart").fadeOut('fast')});

 $("ul.div-nav li.show-hs").click(function(){$("#daily-wrapper .webpart.hs").fadeIn('slow')});

 $("ul.div-nav li.show-ms").click(function(){$("#daily-wrapper .webpart.ms").fadeIn('slow')});

 $("ul.div-nav li.show-es").click(function(){$("#daily-wrapper .webpart.es").fadeIn('slow')});

});

</script>

Structure :

<div id="daily-wrapper">

<ul class="div-nav">

<li class="choice show-hs activated">High School</li>

<li class="choice show-ms">Middle School</li>

<li class="choice show-es">Elementary School</li>

</ul>

<div class="content">

<div class="calendar">

<div class="webpart hs">

<h2>div first</h2>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</div>

<div class="webpart ms">

<h2>div Secoond</h2>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</div>

<div class="webpart es"><h2>div Third</h2>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</div>

</div>

</div>

</div>

If you have any questions you can reach out our SharePoint Consulting team here.

May 28, 2012

Generate test data using GenerateData.com

Introduction:
There are times when you need test data in order to test how your application scales. GenerateData.com helps you generate test data in many popular formats like html, xml, csv. excel etc. Let's see how we can use it.
How to:

Goto generatedata.com
Enter column name in column title and select Datatype from drop down.
For ID AutoIncrement Datatype is selected and in options (Start at ) 1 is entered because from which value user wants to start his id number.
And in increment it is given 1 because user wants to increase its id by 1.
Second field is inserted (Functional Group) whose DataType is custom list . The item of custom list is inserted in Enter values Seperated textbox and items should be separated by “|”.
If user has more rows then shown than user can add more values by entering exact figure and click on Row(s) textbox.
After entering all data user has to select Result Type, For Result type option is given on top (HTML,Excel,XML,CSV,SQL), Select the desired Result Type.
And finally click on generate button and if user has selected Excel for result type and an excel will generate and then user can import excel to Database.

Conclusion:

It is really easy and straight forward to genreate test data for almost any kind.