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.

wdd-custom-extension-save-as.png

// 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._toolbox.menuVisible(false);
            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())
        this._toolbox.menuItems.push(this._menuItem);
};
SaveAsDashboardExtension.prototype.stop = function () {
    if (this.isExtensionAvailable())
        this._toolbox.menuItems.remove(this._menuItem);
}