The requested page is not available for the requested platform. You are viewing the content for Default platform.

How to: Implement Save As and Delete Functionality for the ASP.NET Web Forms Dashboard Control

  • 4 min to read

This example demonstrates how to add the "Save As" and "Delete" menu items to the Web Dashboard's UI by implementing the corresponding custom extensions:

  • The "Save As" menu item allows end-users to save the current dashboard with a new name.
  • The "Delete" menu item deletes the opened dashboard from the dashboard storage.

The image below shows the result of the extensions implementation.


// Creates and implements a custom SaveAsDashboardExtension class.

function SaveAsDashboardExtension(dashboardControl) {
    var _this = this;
    this._control = dashboardControl;
    this._toolbox = this._control.findExtension("toolbox");
    this._newDashboardExtension = this._control.findExtension("create-dashboard");
    this._menuItem = {
        id: "dashboard-save-as",
        title: "Save As...",
        template: "dx-save-as-form",
        selected: ko.observable(true),
        disabled: ko.computed(function () { return !dashboardControl.dashboard(); }),
        index: 112,
        data: _this
    this.saveAs = function () {
        if (this.isExtensionAvailable()) {
            this._newDashboardExtension.performCreateDashboard(this.newName(), this._control.dashboard().getJSON());
    this.newName = ko.observable("New Dashboard Name");

SaveAsDashboardExtension.prototype.isExtensionAvailable = function () {
    return this._toolbox !== undefined && this._newDashboardExtension !== undefined;

SaveAsDashboardExtension.prototype.start = function () {
    if (this.isExtensionAvailable())
SaveAsDashboardExtension.prototype.stop = function () {
    if (this.isExtensionAvailable())