how to handle Custom tool bar?

[a.ebbini]

Dear Support Team,
I want to create custom tool bar ,so i set ShowToolBar=false.and i try to put report viewer in callback panel then i do all functionality like next page ,zoom ...etc in server when i do the call back. but there is strange behavior when put a break point in page init function more than 13 times. with knowing that i use ajaxwithcache render mode.
My question is there javascript functions can do all functionality in the tool bar and report viewer will do callback or postback i don't to do this function like next page and why it go more than 13 times to page init function

[HighAley]

Hello.

Could you specify which our Viewer you use?

Thank you.

[a.ebbini]

Dear HighAley,
i am using StiWebViewer 2014.3.17 and i need proto-type functions for FirstPage,PrevPage,LastPage,NextPage,PageNumber,Zoom and how to set ViewMode (OnePage and WholeReport) ,print and save. all these function i need to call it form client side.

[HighAley]

Hello.

Unfortunately, there is no way to create your toolbar this way. If you set the ShowToolBar=false then there will be no such buttons and you will not be able to use their functions.
We will try to create a sample code for you later.

Thank you.

[HighAley]

Hello.

To create your own toolbar you could use next code to hide the toolbar and add your buttons with functions of our toolbar buttons.

Code: Select all

<div style=" width:100%; height:650px">
        <cc1:StiWebViewer ID="StiWebViewer1" runat="server" Width="100%" Height="700px" RenderMode="AjaxWithCache" Theme="Windows7" ScrollBarsMode="True" />
    </div>
    <script>
        //find toolbar by Id and hide
        var toolBarContainer = document.getElementById("StiWebViewer1_StiWebViewer1_toolBar").parentElement;
        toolBarContainer.style.display = "none";
        
        //find next button by Id
        var nextButton = document.getElementById("StiWebViewer1NextPage");
        
        //create new button
        newNextButton = document.createElement("div");        
        toolBarContainer.parentElement.appendChild(newNextButton);
        newNextButton.style.width = "25px";
        newNextButton.style.height = "25px";
        newNextButton.style.background = "red";
        newNextButton.onclick = function () { nextButton.click(); }
    </script>

You could use this code if you know ID of each button from our tool bar. You could get it by inspecting the element in Chrome. But anyway you will see our toolbar for a second at page loading.

We suggest you to use StiMobileViewer. This viewer was created later and works different way. It will be more simple to use.
Here is a sample code that you could use to create your buttons. You will never see our toolbar.

Code: Select all

<form id="form1" runat="server">
    <div>      
        <cc2:StiMobileViewer ID="StiMobileViewer1" runat="server"  EnableRefreshData="false"         
         FullScreen="true" 
         Theme="Office2013DarkGrayTeal"
         ShowDesignButton="false"
         />
    </div>

    <style type="text/css">
        .userButton 
        {
         border: 1px solid gray;
         font-size: 12px;
         display:inline-block;
         float: left;
         margin: 8px;
        }
    </style>

    <script type="text/javascript">
        var userButton = function () {
            var button = document.createElement("div");
            button.className = "userButton";
            
            return button;
        }
        
        jsStiMobileViewer1.options.toolbar.firstChild.style.display = "none";        

        //example navigate button
        var newNextButton = userButton();
        newNextButton.innerHTML = "NextPage";
        jsStiMobileViewer1.options.toolbar.appendChild(newNextButton);
        newNextButton.onclick = function () { jsStiMobileViewer1.actionEvent("NextPage"); }; //LastPage, PrevPage ... and other

        //example save pdf button
        var saveButton = userButton();
        saveButton.innerHTML = "SavePdf";
        jsStiMobileViewer1.options.toolbar.appendChild(saveButton);
        saveButton.onclick = function () {
            var viewerExportForm = jsStiMobileViewer1.options.forms.exportForm || jsStiMobileViewer1.InitializeExportForm("exportForm");
            viewerExportForm.show("StiPdfExportSettings"); //StiXpsExportSettings, StiPpt2007ExportSettings ... and other
        }

        //example print button
        var printButton = userButton();
        printButton.innerHTML = "Print";
        jsStiMobileViewer1.options.toolbar.appendChild(printButton);
        printButton.onclick = function () {
            jsStiMobileViewer1.actionEvent("PrintWithPreview"); //PrintPdf, PrintWithoutPreview
        }
    </script>
    </form>

Thank you.