Custom Toolbar Button on HTML 5 Report Viewer

2 posts, 0 answers
  1. Kevin
    Kevin avatar
    2 posts
    Member since:
    Aug 2017

    Posted 08 Aug 2018 Link to this post

    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? 


    <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


  2. Silviya
    Silviya avatar
    419 posts

    Posted 13 Aug 2018 Link to this post

    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>

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

    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top