Custom Toolbar Button on HTML 5 Report Viewer

[Kevin]

I would like to add a custom button to the HTML 5 Report Viewer's toolbar.  Is there an example of how to accomplish this? 

So far I have managed to create a functional custom button by adding a link to the template with a new data-command attribute, and then adding a new command to the report viewer object (see below).  

This works, and my custom command's exec() function is called when the button is clicked and the enabled() method returns true.  However, the issue I'm having is that I do not know how to get the new button to appear in a disabled state.  I expected the button to appear disabled when the emailReport command's enabled() call returns false, but this is not the case.  Am I going about this the right way, or is there a better way to accomplish this? 

Thanks!

<a title="Email Report" href="#" data-command="telerik_ReportViewer_emailReport"><i class="fa fa-envelope"></i>

this.reportViewer.commands.emailReport =  {
        enabled: () => {
            // todo
            return false;
        },
        checked: () => {
            // todo
            return false;
        },
        exec: () => {
            // todo
        },
    };

[Silviya]

Hello Kevin,

The HTML5 Viewer is an HTML/CSS/Js based widget and you can use Java Script to trigger if the new command returns false and add class .k-state-disabled on it's parent element to apply the disable mode styling.

Additionally, it is important to follow the DOM structure, when editing the default templates. For example the new command have to be wrapped in <li> element:

<li aria-label="Email Report" class="k-item k-state-default" role="menuitem">
    <a title="Email Report" href="#" data-command="telerik_ReportViewer_emailReport"><i class="fa fa-envelope"></i>
</li>

As a side note, emailing the report from the report viewers is part of Telerik Reporting Roadmap for the upcoming release (R3 2018 Sep).

Regards,
Silviya
Progress Telerik