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

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);
}