@progress/telerik-jquery-report-viewer 31.26.812 → 31.26.1007

package/README.md

@@ -20,6 +20,8 @@ Major features:
 
 This version of Telerik jQuery Report Viewer requires either Telerik Report Server or Telerik Reporting REST Service _REPORTING_VERSION_PLACEHOLDER_.
 
+The viewer uses Kendo SVG icons. Its templates and distribution do not require the ReportingIcons font or the `fonticons` stylesheet.
+
 Learn more about Telerik Reporting Viewers here: [Telerik Report Viewers Overview](https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/overview)
 
 ## License

package/dist/cjs/commandSet.js

@@ -43,6 +43,22 @@ function CommandSet(options) {
   if (!historyManager) {
     throw "No options.history.";
   }
+  var exportSettingsStore = options.exportSettingsStore;
+  var exportDialogEnabled = Boolean(options.exportDialog.enabled);
+  var hasConfigurableExportSettings = false;
+  var openExportDialogCommand = new command.Command(() => {
+    if (exportDialogEnabled && hasConfigurableExportSettings) {
+      notificationService.setExportDialogVisible({ visible: true });
+    }
+  }).setEnabled(false);
+  controller.on("beginLoadReport", () => {
+    hasConfigurableExportSettings = false;
+    openExportDialogCommand.setEnabled(false);
+  }).onAsync("reportLoadComplete", async (info) => {
+    const extensions = Array.isArray(info?.renderingExtensions) ? info.renderingExtensions : await Promise.resolve(controller.getDocumentFormats());
+    hasConfigurableExportSettings = RCV__namespace.hasExportSettings(extensions);
+    openExportDialogCommand.setEnabled(exportDialogEnabled && hasConfigurableExportSettings);
+  });
   function getDocumentMapVisible() {
     var args = {};
     notificationService.getDocumentMapState(args);
@@ -103,9 +119,16 @@ function CommandSet(options) {
     }),
     "export": new command.Command((format) => {
       if (format) {
-        controller.exportReport(format);
+        Promise.resolve(controller.getDocumentFormats()).then((formats) => {
+          const extension = (formats || []).find((item) => item.name === format);
+          const deviceInfo = extension && exportSettingsStore ? exportSettingsStore.getDeviceInfo(format, extension.settings || []) : {};
+          controller.exportReport(format, deviceInfo);
+        }).catch((error) => {
+          controller.trigger("error", { message: error });
+        });
       }
     }),
+    "openExportDialog": openExportDialogCommand,
     "print": new command.Command(() => {
       controller.printReport();
     }),

package/dist/cjs/exportDialog.js

@@ -0,0 +1,581 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var RCV = require('@progress/telerik-common-report-viewer');
+var stringResources = require('./stringResources.js');
+var binder = require('./binder.js');
+var command = require('./command.js');
+var utils = require('./utils.js');
+
+const PAGE_SELECTION_FIELD = "__trvPageSelection";
+function replaceStringResources($dialog) {
+  if (!$dialog) {
+    return;
+  }
+  const labels = $dialog.find(".trv-replace-string");
+  if (labels.length) {
+    Array.from(labels).forEach((element) => {
+      const $element = $(element);
+      const stringResource = stringResources.stringResources[$element.text()];
+      if (stringResource) {
+        $element.text(stringResource);
+      }
+    });
+  }
+  const ariaLabels = $dialog.find("[aria-label]").add($dialog);
+  if (ariaLabels.length) {
+    Array.from(ariaLabels).forEach((element) => {
+      const $element = $(element);
+      const stringResource = stringResources.stringResources[$element.attr("aria-label")];
+      if (stringResource) {
+        $element.attr("aria-label", stringResource);
+      }
+    });
+  }
+}
+function isPasswordSetting(name) {
+  return typeof name === "string" && name.toLowerCase().includes("password");
+}
+function createEditorInput(container, options, type) {
+  return $("<input />").attr({
+    id: options.field,
+    name: options.field,
+    type,
+    "data-bind": `${type === "checkbox" ? "checked" : "value"}:${options.field}`
+  }).appendTo(container);
+}
+function createPasswordEditor(container, options) {
+  createEditorInput(container, options, "password").attr("autocomplete", "new-password").kendoTextBox({ enable: options.editorOptions.enabled });
+}
+function createDropDownEditor(container, options) {
+  createEditorInput(container, options, "text").kendoDropDownList({
+    dataSource: options.editorOptions.dataSource,
+    enable: options.editorOptions.enabled
+  });
+}
+function createCheckBoxEditor(container, options) {
+  container.closest(".k-form-field").addClass("trv-export-boolean-field");
+  createEditorInput(container, options, "checkbox").kendoCheckBox({
+    enabled: options.editorOptions.enabled
+  });
+}
+function createNumericEditor(container, options) {
+  createEditorInput(container, options, "text").kendoNumericTextBox({
+    format: "n0",
+    decimals: 0,
+    min: 0,
+    step: 1,
+    autoAdjust: true,
+    enable: options.editorOptions.enabled
+  });
+}
+function createTextEditor(container, options) {
+  createEditorInput(container, options, "text").kendoTextBox({
+    placeholder: stringResources.stringResources.exportDialogTextPlaceholder,
+    enable: options.editorOptions.enabled
+  });
+}
+function createPageSelectionEditor(container, options) {
+  const optionName = `${options.field}-${kendo.guid()}`;
+  container.closest(".k-form-field").addClass("trv-export-page-selection");
+  [
+    { selected: false, text: options.editorOptions.allPagesLabel },
+    { selected: true, text: options.editorOptions.pageRangeLabel }
+  ].forEach((pageOption) => {
+    const inputId = kendo.guid();
+    const option = $('<label class="trv-export-page-option"></label>').appendTo(container);
+    const input = $('<input type="radio" />').attr({
+      id: inputId,
+      name: optionName,
+      [kendo.attr("skip")]: true
+    }).appendTo(option).kendoRadioButton({ checked: pageOption.selected === options.editorOptions.pageRangeSelected });
+    $("<span></span>").text(pageOption.text).appendTo(option);
+    input.on("change", () => options.editorOptions.change(pageOption.selected, options.model));
+  });
+}
+class ExportDialog {
+  // #region fields
+  // #endregion
+  // #region constructor
+  constructor(element, options, viewerOptions) {
+    this.options = options;
+    this.viewerOptions = viewerOptions;
+    this.element = element;
+    this.$element = $(element);
+    this.controller = options.controller;
+    this.notificationService = options.notificationService;
+    this.exportSettingsStore = options.exportSettingsStore;
+    this.initialized = false;
+    this.dialogVisible = false;
+    this.format = "";
+    this.formats = [];
+    this.pendingValues = {};
+    this.initialValues = {};
+    this.formatDrawer = void 0;
+    this.settingsForm = void 0;
+    this.currentValues = void 0;
+    this.pagingSettingNames = [];
+    this.windowLocation = void 0;
+    if (!this.controller) {
+      throw "No controller (telerikReporting.ReportViewerController) has been specified.";
+    }
+    if (!this.notificationService) {
+      throw "No notificationService (telerikReporting.NotificationService) has been specified.";
+    }
+    this.init();
+  }
+  // #endregion
+  // #region methods
+  init() {
+    if (this.initialized) {
+      return;
+    }
+    replaceStringResources(this.$element);
+    this.$settingsContainer = this.$element.find(".trv-export-dialog-settings");
+    this.$noSettingsMessage = this.$element.find(".trv-export-dialog-no-settings");
+    this.$formatSelector = this.$element.find(".trv-export-dialog-formats");
+    this._initDialog();
+    this._attachCommands();
+    this._attachEvents();
+    this.initialized = true;
+  }
+  _initDialog() {
+    this.phoneViewport = this.isPhoneViewport();
+    this.kendoExportDialog = new kendo.ui.Window(this.element, {
+      title: stringResources.stringResources.exportDialogTitle,
+      visible: false,
+      draggable: !this.phoneViewport,
+      resizable: true,
+      modal: true,
+      close: () => {
+        this.storeDialogPosition();
+      },
+      open: () => {
+        this.updateDialogViewport();
+        this.adjustDialogPosition();
+      },
+      resize: () => {
+        kendo.resize(this.$element, true);
+      },
+      deactivate: () => {
+        this.notificationService.setExportDialogVisible({ visible: false });
+      }
+    });
+    this.kendoExportDialog.element.removeClass("trv-export-dialog k-hidden");
+    this.kendoExportDialog.wrapper.addClass("trv-export-dialog");
+    this.kendoExportDialog.wrapper.find(".k-window-title").prepend(
+      $('<span aria-hidden="true"></span>').addClass(
+        `k-sprite rendering-extension-icon ${utils.getExportOptionsIconClass()}`
+      )
+    );
+    this.$element.find(".trv-export-dialog-reset").kendoButton({
+      icon: "arrow-rotate-cw",
+      fillMode: "flat",
+      themeColor: "base"
+    });
+    this.$element.find(".trv-export-dialog-documentation").attr("title", stringResources.stringResources.exportDialogDocumentationLabel).prepend(kendo.ui.icon({ icon: "hyperlink-open" }));
+    this.$element.find('[data-command="telerik_ReportViewer_exportDialog_Close"]').kendoButton({
+      fillMode: "solid",
+      themeColor: "base"
+    });
+    this.$element.find('[data-command="telerik_ReportViewer_exportDialog_Save"]').kendoButton({
+      fillMode: "solid",
+      themeColor: "primary"
+    });
+    this.$settingsContainer.kendoTooltip({
+      filter: ".trv-export-setting-info",
+      showOn: "mouseenter focus",
+      position: "top",
+      content: (event) => $('<span class="trv-export-setting-tooltip-text"></span>').text(event.target.attr("data-description") || "")[0].outerHTML
+    });
+  }
+  _attachCommands() {
+    this.optionsCommandSet = {
+      "exportDialog_Close": new command.Command(() => {
+        this.close();
+      }),
+      "exportDialog_Save": new command.Command(() => {
+        this.save();
+      }),
+      "exportDialog_Reset": new command.Command(() => {
+        this.reset();
+      })
+    };
+    binder.Binder.attachCommands(this.$element.find(".trv-export-dialog-layout"), this.optionsCommandSet, this.viewerOptions);
+  }
+  _attachEvents() {
+    this.controller.on("beginLoadReport", this.close.bind(this)).on("viewModeChanged", this.close.bind(this));
+    this.notificationService.setExportDialogVisible((event, args) => {
+      if (args && args.visible === true) {
+        this.open(args.format);
+      } else {
+        this.close();
+      }
+    });
+    $(window).on("resize", () => {
+      if (this.kendoExportDialog && this.kendoExportDialog.options.visible) {
+        if (!this.phoneViewport) {
+          this.storeDialogPosition();
+        }
+        this.updateDialogViewport();
+        this.adjustDialogPosition();
+      }
+    });
+  }
+  isPhoneViewport() {
+    return $(window).innerWidth() <= 767;
+  }
+  updateDialogViewport() {
+    const phone = this.isPhoneViewport();
+    if (phone !== this.phoneViewport) {
+      this.phoneViewport = phone;
+      this.kendoExportDialog.setOptions({ draggable: !phone });
+    }
+    this.updateFormatDrawerForViewport();
+    kendo.resize(this.$element, true);
+  }
+  open() {
+    this.dialogVisible = false;
+    const formatsPromise = this.controller.getDocumentFormats();
+    Promise.resolve(formatsPromise).then((formats) => {
+      if (!RCV.hasExportSettings(formats)) {
+        return;
+      }
+      this.dialogVisible = true;
+      this.pendingValues = {};
+      this.initialValues = {};
+      this.formats = formats || [];
+      this.buildFormatDrawer();
+      this.kendoExportDialog.open();
+    });
+  }
+  close() {
+    this.dialogVisible = false;
+    this.pendingValues = {};
+    this.initialValues = {};
+    this.destroySettingsForm();
+    if (this.kendoExportDialog && this.kendoExportDialog.options.visible) {
+      this.kendoExportDialog.close();
+    }
+  }
+  buildFormatDrawer() {
+    const selectedFormat = this.formats.some((item) => item.name === this.format) ? this.format : this.formats[0]?.name;
+    const drawerItems = this.formats.map((format) => ({
+      format: format.name,
+      text: format.localizedName,
+      selected: format.name === selectedFormat,
+      miniTemplate: () => {
+        const iconClass = utils.getRenderingExtensionIconClass(format.name);
+        const icon = iconClass ? `<span aria-hidden="true" class="k-sprite rendering-extension-icon ${iconClass}"></span>` : `<span aria-hidden="true">${kendo.htmlEncode(format.name.slice(0, 3))}</span>`;
+        return `<li data-role="drawer-item">${icon}</li>`;
+      }
+    }));
+    if (this.formatDrawer) {
+      this.formatDrawer.setOptions({ items: drawerItems });
+    } else {
+      this.formatDrawer = this.$formatSelector.kendoDrawer({
+        items: drawerItems,
+        mode: "push",
+        position: "left",
+        width: 240,
+        mini: { width: 48 },
+        expanded: !this.isPhoneViewport(),
+        autoCollapse: false,
+        swipeToOpen: false,
+        navigatable: true,
+        itemClick: (event) => {
+          if (event.dataItem?.format) {
+            this.showFormat(event.dataItem.format);
+          }
+        }
+      }).data("kendoDrawer");
+    }
+    this.updateFormatDrawerForViewport();
+    this.renderFormatDrawerIcons();
+    this.showFormat(selectedFormat);
+  }
+  updateFormatDrawerForViewport() {
+    if (!this.formatDrawer) {
+      return;
+    }
+    if (this.isPhoneViewport() && this.formatDrawer.visible) {
+      this.formatDrawer.hide();
+    } else if (!this.isPhoneViewport() && !this.formatDrawer.visible) {
+      this.formatDrawer.show();
+    }
+    if (this.formatDrawer.visible) {
+      this.renderFormatDrawerIcons();
+    }
+  }
+  renderFormatDrawerIcons() {
+    if (!this.formatDrawer.visible) {
+      return;
+    }
+    const drawerElements = this.formatDrawer.drawerItemsWrapper.find('[data-role="drawer-item"]');
+    drawerElements.each((index, element) => {
+      const format = this.formats[index];
+      const iconClass = utils.getRenderingExtensionIconClass(format?.name);
+      const $element = $(element);
+      $element.find(".k-item-text").attr("title", format?.localizedName || "");
+      if (iconClass && !$element.find(".rendering-extension-icon").length) {
+        $element.prepend(
+          $('<span aria-hidden="true"></span>').addClass(
+            `k-sprite rendering-extension-icon ${iconClass}`
+          )
+        );
+      }
+    });
+  }
+  showFormat(format) {
+    this.capturePendingValues();
+    this.format = format;
+    const extension = this.formats.find((item) => item.name === format);
+    this.$element.find(".trv-export-dialog-format-name").text(
+      `${extension?.localizedName || format || ""}${stringResources.stringResources.exportDialogSettingsSuffix}`
+    );
+    this.$element.find(".trv-export-dialog-reset").attr("title", stringResources.stringResources.ariaLabelExportDialogReset);
+    this.buildSettingsForm(extension ? extension.settings : []);
+  }
+  buildSettingsForm(settings) {
+    this.destroySettingsForm();
+    if (!settings || settings.length === 0) {
+      this.$noSettingsMessage.removeClass("k-hidden");
+      return;
+    }
+    this.$noSettingsMessage.addClass("k-hidden");
+    if (!kendo.ui.Form) {
+      console.error("The Kendo UI Form widget is not available. Export settings cannot be displayed.");
+      this.$noSettingsMessage.removeClass("k-hidden");
+      return;
+    }
+    const formData = {};
+    const groups = /* @__PURE__ */ new Map();
+    settings.forEach((setting) => {
+      const pendingValues = this.pendingValues[this.format];
+      const savedValue = this.exportSettingsStore ? this.exportSettingsStore.getValue(this.format, setting) : setting.value;
+      const initialValue = pendingValues && Object.prototype.hasOwnProperty.call(pendingValues, setting.name) ? pendingValues[setting.name] : savedValue ?? this.getDefaultValue(setting.type);
+      const groupName = setting.group?.trim() || "General";
+      const groupSettings = groups.get(groupName) || [];
+      formData[setting.name] = initialValue;
+      groupSettings.push(setting);
+      groups.set(groupName, groupSettings);
+    });
+    const pageRangeSelected = Number(formData.StartPage) > 0;
+    if (!Object.prototype.hasOwnProperty.call(this.initialValues, this.format)) {
+      this.initialValues[this.format] = { ...formData };
+    }
+    this.currentValues = { ...formData };
+    formData[PAGE_SELECTION_FIELD] = pageRangeSelected;
+    const formElement = $('<div class="trv-export-settings-form"></div>').appendTo(this.$settingsContainer.empty());
+    const items = Array.from(groups, ([name, groupSettings]) => {
+      const isPagingGroup = name === "Paging";
+      const groupItems = groupSettings.map((setting) => this.createFormItem(setting));
+      if (isPagingGroup) {
+        this.pagingSettingNames = groupSettings.map((setting) => setting.name);
+        groupItems.reverse();
+        groupItems.unshift(this.createPageSelectionFormItem(pageRangeSelected));
+      }
+      return {
+        type: "group",
+        label: name,
+        layout: "grid",
+        grid: { cols: 1, gutter: 12 },
+        items: groupItems
+      };
+    });
+    this.settingsForm = formElement.kendoForm({
+      formData: { ...formData },
+      items,
+      renderButtons: false,
+      focusFirst: false,
+      validatable: {
+        validateOnBlur: false,
+        validationSummary: false
+      },
+      change: (event) => {
+        if (event.field !== PAGE_SELECTION_FIELD) {
+          this.currentValues[event.field] = event.value;
+        }
+      }
+    }).data("kendoForm");
+    this.renderSettingInfoIcons(settings);
+    this.togglePagingSettings(pageRangeSelected);
+  }
+  renderSettingInfoIcons(settings) {
+    settings.forEach((setting) => {
+      if (!setting.description) {
+        return;
+      }
+      const label = this.$settingsContainer.find(".k-form-label").filter((index, element) => element.htmlFor === setting.name);
+      const info = $('<span class="trv-export-setting-info" tabindex="0" role="img"></span>').attr({
+        "aria-label": setting.description,
+        "data-description": setting.description
+      }).append(kendo.ui.icon({ icon: "info-circle", type: "font" })).on("click", (event) => event.preventDefault());
+      label.append(info);
+    });
+  }
+  createPageSelectionFormItem(pageRangeSelected) {
+    return {
+      field: PAGE_SELECTION_FIELD,
+      label: stringResources.stringResources.exportDialogPagesLabel,
+      editor: createPageSelectionEditor,
+      editorOptions: {
+        pageRangeSelected,
+        allPagesLabel: stringResources.stringResources.exportDialogAllPagesLabel,
+        pageRangeLabel: stringResources.stringResources.exportDialogPageRangeLabel,
+        change: (selected, model) => this.onPageSelectionChange(selected, model)
+      }
+    };
+  }
+  onPageSelectionChange(pageRangeSelected, model) {
+    model.set(PAGE_SELECTION_FIELD, pageRangeSelected);
+    if (pageRangeSelected) {
+      if (this.pagingSettingNames.includes("StartPage") && Number(model.get("StartPage")) <= 0) {
+        model.set("StartPage", 1);
+      }
+    } else {
+      if (this.pagingSettingNames.includes("StartPage")) {
+        model.set("StartPage", 0);
+      }
+      if (this.pagingSettingNames.includes("EndPage")) {
+        model.set("EndPage", 0);
+      }
+    }
+    this.togglePagingSettings(pageRangeSelected);
+  }
+  togglePagingSettings(pageRangeSelected) {
+    this.pagingSettingNames.forEach((name) => {
+      this.$settingsContainer.find(`[data-container-for="${name}"]`).closest(".k-form-field").toggleClass("k-hidden", !pageRangeSelected);
+    });
+  }
+  createFormItem(setting) {
+    const item = {
+      field: setting.name,
+      label: this.getSettingLabel(setting.name),
+      editorOptions: {
+        enabled: !setting.readOnly
+      }
+    };
+    if (isPasswordSetting(setting.name)) {
+      item.editor = createPasswordEditor;
+    } else if (Array.isArray(setting.availableValues) && setting.availableValues.length > 0) {
+      item.editor = createDropDownEditor;
+      item.editorOptions.dataSource = [...setting.availableValues];
+    } else {
+      switch (setting.type) {
+        case "boolean":
+          item.editor = createCheckBoxEditor;
+          break;
+        case "number":
+          item.editor = createNumericEditor;
+          break;
+        default:
+          item.editor = createTextEditor;
+          break;
+      }
+    }
+    return item;
+  }
+  capturePendingValues() {
+    if (this.currentValues && this.format) {
+      this.pendingValues[this.format] = { ...this.currentValues };
+    }
+  }
+  reset() {
+    if (!this.format || !this.exportSettingsStore?.resetValues(this.format)) {
+      return;
+    }
+    delete this.pendingValues[this.format];
+    delete this.initialValues[this.format];
+    const extension = this.formats.find((item) => item.name === this.format);
+    this.buildSettingsForm(extension ? extension.settings : []);
+  }
+  save() {
+    this.capturePendingValues();
+    let saved = true;
+    this.formats.forEach((extension) => {
+      const values = this.pendingValues[extension.name];
+      if (values && this.exportSettingsStore) {
+        const initialValues = this.initialValues[extension.name] || {};
+        const changedValues = {};
+        Object.keys(values).forEach((name) => {
+          if (values[name] !== initialValues[name]) {
+            changedValues[name] = values[name];
+          }
+        });
+        saved = this.exportSettingsStore.saveValues(
+          extension.name,
+          extension.settings || [],
+          changedValues
+        ) && saved;
+        if (saved) {
+          this.initialValues[extension.name] = { ...values };
+        }
+      }
+    });
+    if (saved) {
+      this.close();
+    }
+  }
+  getDefaultValue(settingType) {
+    switch (settingType) {
+      case "boolean":
+        return false;
+      case "number":
+        return null;
+      default:
+        return "";
+    }
+  }
+  getSettingLabel(name) {
+    return stringResources.stringResources["exportSetting_" + name] || RCV.splitPascalCase(name);
+  }
+  destroySettingsForm() {
+    if (this.settingsForm) {
+      this.settingsForm.destroy();
+      this.settingsForm = void 0;
+    }
+    this.currentValues = void 0;
+    this.pagingSettingNames = [];
+    if (this.$settingsContainer) {
+      this.$settingsContainer.empty();
+    }
+  }
+  storeDialogPosition() {
+    if (this.phoneViewport) {
+      return;
+    }
+    const kendoWindow = this.kendoExportDialog.element.parent(".k-window");
+    this.windowLocation = kendoWindow.offset();
+  }
+  adjustDialogPosition() {
+    if (this.phoneViewport) {
+      return;
+    }
+    const windowWidth = $(window).innerWidth();
+    const windowHeight = $(window).innerHeight();
+    const width = this.kendoExportDialog.wrapper.outerWidth(true);
+    const height = this.kendoExportDialog.wrapper.outerHeight(true);
+    const padding = 10;
+    if (!this.windowLocation) {
+      this.kendoExportDialog.center();
+      return;
+    }
+    let left = this.windowLocation.left;
+    let top = this.windowLocation.top;
+    const right = left + width;
+    const bottom = top + height;
+    if (right > windowWidth - padding) {
+      left = Math.max(padding, windowWidth - width - padding);
+      this.kendoExportDialog.setOptions({ position: { left } });
+    }
+    if (bottom > windowHeight - padding) {
+      top = Math.max(padding, windowHeight - height - padding);
+      this.kendoExportDialog.setOptions({ position: { top } });
+    }
+  }
+  // #endregion
+}
+
+exports.ExportDialog = ExportDialog;

package/dist/cjs/mainMenu.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var utils = require('./utils.js');
-var stringResources = require('./stringResources.js');
 var RCV = require('@progress/telerik-common-report-viewer');
+var stringResources = require('./stringResources.js');
 
 var lastSelectedMenuItem;
 var lastSelectedSubmenuItem;
@@ -114,9 +114,16 @@ function MainMenu(element, options, viewerOptions) {
       $list.empty();
       Array.from(formats).forEach((format) => {
         var ariaLabel = enableAccessibility ? utils.stringFormat('aria-label="{localizedName}" ', format) : " ";
-        var li = "<li " + ariaLabel + utils.stringFormat('tabindex="' + tabIndex + '"><a tabindex="-1" href="#" data-command="telerik_ReportViewer_export" data-command-parameter="{name}"><span>{localizedName}</span></a></li>', format);
+        var iconClass = utils.getRenderingExtensionIconClass(format.name);
+        var icon = iconClass ? '<span aria-hidden="true" class="k-sprite rendering-extension-icon ' + iconClass + '"></span>' : "";
+        var li = "<li " + ariaLabel + utils.stringFormat('tabindex="' + tabIndex + '"><a tabindex="-1" href="#" data-command="telerik_ReportViewer_export" data-command-parameter="{name}">' + icon + "<span>{localizedName}</span></a></li>", format);
         menu.append(li, $parent);
       });
+      if (options.exportDialog.enabled && RCV.hasExportSettings(formats)) {
+        var optionsIconClass = utils.getExportOptionsIconClass();
+        var optionsIcon = '<span aria-hidden="true" class="k-sprite rendering-extension-icon ' + optionsIconClass + '"></span>';
+        menu.append('<li class="trv-export-options-item" tabindex="' + tabIndex + '"><a tabindex="-1" href="#" data-command="telerik_ReportViewer_openExportDialog">' + optionsIcon + "<span>" + kendo.htmlEncode(stringResources.stringResources.exportOptionsLabel) + "</span></a></li>", $parent);
+      }
       if (enableAccessibility) {
         setInternalListAccessibilityKeyEvents($parent.find("li"));
       }

package/dist/cjs/notificationService.js

@@ -78,6 +78,7 @@ class NotificationService {
     GET_SEND_EMAIL_DIALOG_STATE: "trv.GET_SEND_EMAIL_DIALOG_STATE",
     SET_SEARCH_DIALOG_VISIBLE: "trv.SET_SEARCH_DIALOG_VISIBLE",
     SET_SEND_EMAIL_DIALOG_VISIBLE: "trv.SET_SEND_EMAIL_DIALOG_VISIBLE",
+    SET_EXPORT_DIALOG_VISIBLE: "trv.SET_EXPORT_DIALOG_VISIBLE",
     SET_AI_PROMPT_DIALOG_VISIBLE: "trv.SET_AI_PROMPT_DIALOG_VISIBLE"
   };
   on() {
@@ -120,6 +121,9 @@ class NotificationService {
   setSendEmailDialogVisible() {
     return this.eventFactory(this.Events.SET_SEND_EMAIL_DIALOG_VISIBLE, arguments);
   }
+  setExportDialogVisible() {
+    return this.eventFactory(this.Events.SET_EXPORT_DIALOG_VISIBLE, arguments);
+  }
   setAiPromptDialogVisible() {
     return this.eventFactory(this.Events.SET_AI_PROMPT_DIALOG_VISIBLE, arguments);
   }