Thursday, May 23, 2019

SSRS Report viewer - Translating the toolbar control using java script

So, you need to translate or make custom changes to   ssrs  viewer  tool bar  controls? Javascript makes it easy to accomplish that. For our example, we will be using asp.net to  to change  4  different labels on the toolbar.
In order to accomplish that we will use four hidden fields to pass our values from the database and the below javascript functions below on window load.
Basically, we just read the element id from  the document and  change the title and innerHtml text as desired. The trickiest par was changing  the number "of" pages since the original code does not give it an id. For this instance, I created a second function to get the first instance of  a span tag using findFirstDescendant().
Pretty basic stuff but handy!

      // variables to hold our values
     <asp:HiddenField ID="find" runat="server" />
    <asp:HiddenField ID="next" runat="server" />
    <asp:HiddenField ID="of" runat="server" />
    <asp:HiddenField ID="btnexport" runat="server" />

 //toolbar   function
        window.onload = function () {
            var findLabel = document.getElementById('MainContent_find').value;
            var find = document.getElementById('ctl00_MainContent_ReportViewer2_ctl05_ctl03_ctl01');
            find.title = findLabel;
            find.innerHTML = findLabel;

            var nextLabel = document.getElementById('MainContent_next').value;
            var next = document.getElementById('ctl00_MainContent_ReportViewer2_ctl05_ctl03_ctl03');
            next.title = nextLabel;
            next.innerHTML = nextLabel;

            var ofLabel = document.getElementById('MainContent_of').value;
            var of = findFirstDescendant('span');
            of.innerHTML = ofLabel;

            var exportLabel = document.getElementById('MainContent_btnexport').value;
            var exportBtn = document.getElementById('ctl00_MainContent_ReportViewer2_ctl05_ctl04_ctl00_ButtonLink');
            exportBtn.title = exportLabel;
            //exportBtn.innerHTML = exportLabel;

        };

        function findFirstDescendant(tagname) {
            var parent = document.getElementById('ctl00_MainContent_ReportViewer2_ctl05');
            var descendants = parent.getElementsByTagName(tagname);
            if (descendants.length)
                return descendants[0];
            return null;
        }

English version of tool bar.

Toolbar translated to German as a result.

This is for showcasing only and if using this code on a production environment, one should implement error handling and such. Enjoy!