Blazor - add custom Viewer button

Stimulsoft Reports.NET discussion
mrapi
Posts: 277
Joined: Sat Dec 20, 2008 1:08 am

Blazor - add custom Viewer button

Post 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
Lech Kulikowski
Posts: 6196
Joined: Tue Mar 20, 2018 5:34 am

Re: Blazor - add custom Viewer button

Post by Lech Kulikowski »

Hello,

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

Thank you.
Lech Kulikowski
Posts: 6196
Joined: Tue Mar 20, 2018 5:34 am

Re: Blazor - add custom Viewer button

Post 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.
mrapi
Posts: 277
Joined: Sat Dec 20, 2008 1:08 am

Re: Blazor - add custom Viewer button

Post 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
Lech Kulikowski
Posts: 6196
Joined: Tue Mar 20, 2018 5:34 am

Re: Blazor - add custom Viewer button

Post 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.
mrapi
Posts: 277
Joined: Sat Dec 20, 2008 1:08 am

Re: Blazor - add custom Viewer button

Post by mrapi »

great.thanks
Andrew
Posts: 4104
Joined: Fri Jun 09, 2006 3:58 am

Re: Blazor - add custom Viewer button

Post by Andrew »

You are welcome!
mrapi
Posts: 277
Joined: Sat Dec 20, 2008 1:08 am

Re: Blazor - add custom Viewer button

Post by mrapi »

I've updated,it is working.thanks!
Andrew
Posts: 4104
Joined: Fri Jun 09, 2006 3:58 am

Re: Blazor - add custom Viewer button

Post by Andrew »

Okay, great!

Have a nice day!
mrapi
Posts: 277
Joined: Sat Dec 20, 2008 1:08 am

Re: Blazor - add custom Viewer button

Post by mrapi »

Thanks Andrew,a good day for you too!
Post Reply