This example demonstrates how to add the “Save As” and “Delete” menu items to the Web Dashboard control. This items allow you to save the current dashboard with a new name and delete the opened dashboard, respectively.
To add a custom functionality, create and implement a custom extension class and define an extension template. After that call the DashboardControl.registerExtension method to add this functionality to the Web Dashboard.
The image below shows the result of the extensions implementation.
using Storages;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_WebDashboard.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult DeleteDashboard(string DashboardID) {
CustomDashboardFileStorage newDashboardStorage = new CustomDashboardFileStorage(@"~/App_Data/Dashboards");
newDashboardStorage.DeleteDashboard(DashboardID);
return new EmptyResult();
}
}
}
using DevExpress.DashboardWeb;
using System.IO;
namespace Storages {
public class CustomDashboardFileStorage : DashboardFileStorage {
public CustomDashboardFileStorage(string workingDirectory)
: base(workingDirectory) {
}
public void DeleteDashboard(string dashboardID) {
var dashboardPath = base.ResolveFileName(dashboardID);
if (File.Exists(dashboardPath))
File.Delete(dashboardPath);
}
}
}
@{
ViewBag.Title = "MVCxDashboard";
}
@Html.DevExpress().Dashboard(settings => {
settings.Name = "Dashboard";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Percentage(100);
settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>@ViewBag.Title</title>
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard },
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.Dashboard },
new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new Script { ExtensionSuite = ExtensionSuite.Editors }
)
<script type="text/javascript" src="Scripts/SaveAsExtension.js"></script>
<script type="text/javascript" src="Scripts/DeleteExtension.js"></script>
<!-- Defines the "Save As" extension template. -->
<script type="text/html" id="dx-save-as-form">
<div>Dashboard Name:</div>
<div style="margin: 10px 0" data-bind="dxTextBox: { value: newName }"></div>
<div data-bind="dxButton: { text: 'Save', onClick: saveAs }"></div>
</script>
<script type="text/javascript">
function onBeforeRender(sender) {
var control = sender.getDashboardControl();
control.registerExtension(new SaveAsDashboardExtension(control));
control.registerExtension(new DeleteDashboardExtension(sender));
}
</script>
</head>
<body>
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
@RenderBody()
</div>
</body>
</html>
// 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);
}
// Creates and implements a custom DeleteDashboardExtension class.
function DeleteDashboardExtension(_wrapper) {
var _this = this;
this._wrapper = _wrapper;
this._control = _wrapper.GetDashboardControl();
this._toolbox = this._control.findExtension('toolbox');
this.name = "dxdde-delete-dashboard";
this.deleteDashboard = function () {
if (_this.isExtensionAvailable()) {
if (confirm("Delete this Dashboard?")) {
var dashboardid = _this._control.dashboardContainer().id;
var param = JSON.stringify({ DashboardID: dashboardid, ExtensionName: _this.name });
_this._toolbox.menuVisible(false);
$.ajax({
url: 'Home/DeleteDashboard',
data: { DashboardID: dashboardid },
type: 'POST',
}).success(function () {
_this._control.close();
});
}
}
}
this._menuItem = {
id: this.name,
title: "Delete",
click: this.deleteDashboard,
selected: ko.observable(false),
disabled: ko.computed(function () { return !_this._control.dashboard(); }),
index: 113,
hasSeparator: true,
data: _this
};
}
DeleteDashboardExtension.prototype.isExtensionAvailable = function () {
return this._toolbox !== undefined;
}
DeleteDashboardExtension.prototype.start = function () {
if (this.isExtensionAvailable())
this._toolbox.menuItems.push(this._menuItem);
};
DeleteDashboardExtension.prototype.stop = function () {
if (this.isExtensionAvailable())
this._toolbox.menuItems.remove(this._menuItem);
};