BuyLog In
Example T830473
Visible to All Users

Reporting for Web Forms - How to Customize the Web Document Viewer's Toolbar

This example shows how to handle the client-side CustomizeMenuActions event to hide the existing Highlight Editing Fields toolbar command and add a new Run Slide Show command that navigates through pages.

To get a command, call the event argument's GetById method and pass the command ID as a parameter. To hide a command and its toolbar button, set the command's visible property to false.

To add a new toolbar command, follow the steps below:

  • create an image template (in this example, id = "slideshow")
  • specify all command settings including the
    imageTemplateName: "slideshow";
  • call the push method to add a command to the event argument's Actions collection.

Files to Review

Documentation

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

DXWebApplication1/Viewer.aspx 
ASPx
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.master" CodeBehind="Viewer.aspx.cs" Inherits="DXWebApplication1.Viewer" %>

<%@ Register Assembly="DevExpress.XtraReports.v24.2.Web.WebForms, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraReports.Web" TagPrefix="dx" %>

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/html" id="slideshow">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background: new 0 0 24 24;" xml:space="preserve">
            <polygon class="dxd-icon-fill" points="4,2 4,22 22,12 " />
        </svg>
    </script>
    <script type="text/javascript">
        function customizeMenuAction(s, e) {
            var interval;
            var selected = ko.observable(false);
            e.Actions.push({
                text: "Run Slide Show",
                imageTemplateName: "slideshow",
                visible: true,
                disabled: false,
                selected: selected,
                clickAction: function () {
                    if (selected()) {
                        clearInterval(interval);
                        selected(false);
                        return;
                    }
                    var model = s.GetPreviewModel();
                    if (model) {
                        selected(true);
                        interval = setInterval(function () {
                            var pageIndex = model.GetCurrentPageIndex();
                            model.GoToPage(pageIndex + 1);
                        }, 2000);
                    }
                }
            });

            var highlightEditingFieldsAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.HighlightEditingFields);
            if (highlightEditingFieldsAction)
                highlightEditingFieldsAction.visible = false;
        }
    </script>
    <dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
        <ClientSideEvents CustomizeMenuActions="customizeMenuAction" />
    </dx:ASPxWebDocumentViewer>
</asp:Content>

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.