Edit the Toolbar of the HTML5 Mobile Viewer

[anerling]

Hello Stimulsoft,

is there any possibility to edit the toolbar of the HTML5 Mobile Viewer ?
I want to add a "Back Button".


Yours sincerely
ANerling

[Alex K.]

Hello,

Please clarify which viewer are you use - StiMvcMobileViewer or StiMobileViewer.

Thank you.

[anerling]

I am using the StiMvcMobileViewer

[HighAley]

Hello.

You could add next script to add a button on the toolbar. Just put it on a view page after StiMvcMobileViewer.

Code: Select all

<script type="text/jscript">
    //Mvc Viewer Id
    var mvcViewerId = "MvcMobileViewer1";

    //Add 'endsWith' method to String
    String.prototype.endsWith = function (suffix) {
        return this.indexOf(suffix, this.length - suffix.length) !== -1;
    };

    //Clone button method
    function GetCloneButton(button, newCaption, newImage, action) {

        //helper method
        var getButtonInnerChild = function (obj, idSubStr) {
            for (var i = 0; i < obj.childNodes.length; i++) {
                if (obj.childNodes[i].id && obj.childNodes[i].id.endsWith(idSubStr)) return obj.childNodes[i];
                var child = getButtonInnerChild(obj.childNodes[i], idSubStr);
                if (child) return child;
            }
            return null;
        }

        var newButton = button.cloneNode(true);

        //override
        var image = getButtonInnerChild(newButton, "Image");
        image.src = newImage;
        var caption = getButtonInnerChild(newButton, "Caption");
        caption.innerHTML = newCaption;

        newButton.onmouseover = function () { this.className = "stiOverButton"; };
        newButton.onmouseout = function () { this.className = "stiButton"; };
        newButton.onclick = action;

        return newButton;
    }

    //Create new button from clone print button
    var printButton = document.getElementById(mvcViewerId + "Print");
    var newButton = GetCloneButton(printButton, "My button", "http://mobile.stimulsoft.com/default.aspx?stimulsoft_mobile_image=PrintWithPreview.png", function () { alert("click my button!"); });
    newButton.id = "NewButton";

    //Add new button to toolbar
    var toolbarTable = document.getElementById(mvcViewerId + "ToolbarInnerTable");
    var toolbarRow = toolbarTable.rows[0];
    var newCell = toolbarRow.insertCell(0); //set the number of the button
    newCell.style.border = "0";
    newCell.style.padding = "0";
    newCell.appendChild(newButton);
</script>

Thank you.

[anerling]

Thank you for your help, it works well.

[Alex K.]

Hello,

We are always glad to help you!
Let us know if you need any additional help.

Thank you.