This example shows how to create a custom button on the viewer toolbar. First, load scripts:
@using Stimulsoft.Base
@using Stimulsoft.Report
@using Stimulsoft.Report.Blazor
@using Stimulsoft.Report.Web
Next, add report viewer:
<!--Report Viewer-->
<StiBlazorViewer ID="WebViewer1" Report="@Report" OnAfterRenderEvent="@OnAfterRenderEvent" />
After that, create report object and load template:
@code
{
//Report object to use in viewer
private StiReport Report;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
//Create empty report object
this.Report = new StiReport();
//Load report template
var reportBytes = await Http.GetByteArrayAsync("Reports/TwoSimpleLists.mrt");
this.Report.Load(reportBytes);
}
...
Then, create a custom button:
<script>
var createButton = function () {
// 'jsWebViewer1' is a 'js' prefix plus the component ID
var customButton = this.jsWebViewer1.SmallButton("customButton", "Custom Button", "emptyImage");
customButton.image.src = "icon.png";
customButton.action = function () {
alert("Custom Button Event");
}
var toolbarTable = this.jsWebViewer1.controls.toolbar.firstChild.firstChild;
var buttonsTable = toolbarTable.rows[0].firstChild.firstChild;
var customButtonCell = buttonsTable.rows[0].insertCell(0);
customButtonCell.appendChild(customButton);
}
</script>
Finally, use
InvokeVoidAsync to add a button:
...
private void OnAfterRenderEvent()
{
JSRuntime.InvokeVoidAsync("createButton");
}
}
На скриншоте ниже Вы можете увидеть результат выполнения данного кода:
