Page 1 of 2

Blazor - add custom Viewer button

Posted: Mon Apr 12, 2021 9:44 am
by mrapi
Hi
In Js/Angular version I can add a custom button to Viewer using this code:

Code: Select all

        const userButton = this.viewer.jsObject.SmallButton('userButton', 'X', null);

        userButton.action = function () {
          this.myMethod();
        };
        const toolbarTable = this.viewer.jsObject.controls.toolbar.firstChild.firstChild;
        const buttonsTable = toolbarTable.rows[0].lastChild.lastChild;
        const userButtonCell = buttonsTable.rows[0].insertCell(0);
        userButtonCell.className = 'stiJsViewerClearAllStyles';
        userButtonCell.appendChild(userButton);
        userButton.myMethod = this.onClose;
        userButton.modalService = this.modalService;
        userButton.outResult = this.outResult;
        userButton.id = 'userButton';
how to do the same using Blazor version?
thanks

Re: Blazor - add custom Viewer button

Posted: Mon Apr 12, 2021 9:25 pm
by Lech Kulikowski
Hello,

We need some time to check that possibility, we will let you know about the result.

Thank you.

Re: Blazor - add custom Viewer button

Posted: Wed Apr 21, 2021 7:42 am
by Lech Kulikowski
Hello,

You can add the following code in index.html if wasm or _Host.cshtml if server:

Code: Select all

<script>
        var createButton = function () {
            var customButton = this.WebViewer1.SmallButton("customButton", "Custom Button", "emptyImage");
            customButton.image.src = "https://www.stimulsoft.com/images/logo_16.png";
            customButton.action = function () {
                alert("Custom Button Event");
            }
            var toolbarTable = this.WebViewer1.controls.toolbar.firstChild.firstChild;
            var buttonsTable = toolbarTable.rows[0].firstChild.firstChild;
            var customButtonCell = buttonsTable.rows[0].insertCell(0);
            customButtonCell.appendChild(customButton);
        }
    </script>
then add id for viewer and add event:

Code: Select all

 <StiBlazorViewer ID="WebViewer1" OnInitializedEvent="@OnInitializedViewer" OnAfterRenderEvent="@OnAfterRenderViewer" />

    private async void OnInitializedViewer()
    {
        Stimulsoft.Base.StiFontCollection.AddFontFile("wwwroot/fonts/arial.ttf");
        Stimulsoft.Base.StiFontCollection.AddFontFile("wwwroot/fonts/arial-bold.ttf");
        await Task.CompletedTask;
    }

    private void OnAfterRenderViewer()
    {
        JSRuntime.InvokeVoidAsync("createButton");
    }
We will add a sample for that task with the next major release.

Thank you.

Re: Blazor - add custom Viewer button

Posted: Wed Apr 21, 2021 11:00 am
by mrapi
Hi
tried the code but got

Code: Select all

 Unhandled exception rendering component: Object of type 'Stimulsoft.Report.Blazor.StiBlazorViewer' does not have a property matching the name 'OnAfterRenderEvent'.
I have the latest version(2021.2.3)
thanks

Re: Blazor - add custom Viewer button

Posted: Thu Apr 22, 2021 8:48 pm
by Lech Kulikowski
Hello,

That option will be available with the next release build 2021.2.4 which will be available within one or two days.

Thank you.

Re: Blazor - add custom Viewer button

Posted: Fri Apr 23, 2021 5:44 am
by mrapi
great.thanks

Re: Blazor - add custom Viewer button

Posted: Fri Apr 23, 2021 6:11 am
by Andrew
You are welcome!

Re: Blazor - add custom Viewer button

Posted: Sat Apr 24, 2021 8:55 am
by mrapi
I've updated,it is working.thanks!

Re: Blazor - add custom Viewer button

Posted: Mon Apr 26, 2021 4:09 am
by Andrew
Okay, great!

Have a nice day!

Re: Blazor - add custom Viewer button

Posted: Mon Apr 26, 2021 8:11 am
by mrapi
Thanks Andrew,a good day for you too!