<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>@ViewBag.Title</title>
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new Script { ExtensionSuite = ExtensionSuite.Editors },
new Script { ExtensionSuite = ExtensionSuite.Dashboard }
)
<script>
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
dashboardControl.registerExtension(implementCustomExtension(dashboardControl));
}
</script>
</head>
<body>
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
@RenderBody()
</div>
<script src="scripts/customExtension/icon.js"></script>
<script src="scripts/customExtension/meta.js"></script>
<script src="scripts/customExtension/viewer.js"></script>
<script src="scripts/customExtension/customExtension.js"></script>
</body>
</html>
@{
ViewBag.Title = "DevExpress Web Dashboard Application";
}
@Html.DevExpress().Dashboard(settings =>
{
settings.Name = "Dashboard";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Percentage(100);
settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()
var MY_EXTENSION_ICON = '<svg id= "customItemIcon" viewBox="0 0 24 24" ><path stroke="#42f48f" fill="#42f48f" d="M12 2 L2 22 L22 22 Z" /></svg>';
function implementCustomExtension(dashboardControl) {
dashboardControl.registerIcon(MY_EXTENSION_ICON);
return {
name: EXTENSION_NAME,
metaData: customItemExtensionMeta,
createViewerItem: function (model, $element, content) {
return new viewer(model, $element, content);
}
}
};
var viewer = (function (_base) {
__extends(viewer, _base);
function viewer(model, $container, options) {
_base.call(this, model, $container, options);
}
viewer.prototype.renderContent = function ($element, changeExisting) {
var dataSource = [];
this.iterateData(function (dataRow) {
dataSource.push(dataRow.getDisplayText('customBinding'));
});
$element.empty();
if (this.getPropertyValue('customProperty') == 'Include') {
$element.append($('<div/>', { style: "margin-left: 10px; font-weight: bold" }).html(this.getBindingValue('customBinding')[0].displayName()));
}
$element.append($('<div/>', { style: "margin-left: 10px;" }).html(dataSource.join("<br />")));
};
return viewer;
}(DevExpress.Dashboard.customViewerItem));
@Code
ViewData("Title") = "DevExpress Web Dashboard Application"
End Code
@Html.DevExpress().Dashboard(Sub(settings)
settings.Name = "Dashboard"
settings.ClientSideEvents.BeforeRender = "onBeforeRender"
settings.Width = Unit.Percentage(100)
settings.Height = Unit.Percentage(100)
End Sub).GetHtml()
var MY_EXTENSION_ICON = '<svg id= "customItemIcon" viewBox="0 0 24 24" ><path stroke="#42f48f" fill="#42f48f" d="M12 2 L2 22 L22 22 Z" /></svg>';
var viewer = (function (_base) {
__extends(viewer, _base);
function viewer(model, $container, options) {
_base.call(this, model, $container, options);
}
viewer.prototype.renderContent = function ($element, changeExisting) {
var dataSource = [];
this.iterateData(function (dataRow) {
dataSource.push(dataRow.getDisplayText('customBinding'));
});
$element.empty();
if (this.getPropertyValue('customProperty') == 'Include') {
$element.append($('<div/>', { style: "margin-left: 10px; font-weight: bold" }).html(this.getBindingValue('customBinding')[0].displayName()));
}
$element.append($('<div/>', { style: "margin-left: 10px;" }).html(dataSource.join("<br />")));
};
return viewer;
}(DevExpress.Dashboard.customViewerItem));
function implementCustomExtension(dashboardControl) {
dashboardControl.registerIcon(MY_EXTENSION_ICON);
return {
name: EXTENSION_NAME,
metaData: customItemExtensionMeta,
createViewerItem: function (model, $element, content) {
return new viewer(model, $element, content);
}
}
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>@ViewData("Title")</title>
@Html.DevExpress().GetStyleSheets(
New StyleSheet With {.ExtensionSuite = ExtensionSuite.NavigationAndLayout},
New StyleSheet With {.ExtensionSuite = ExtensionSuite.Editors},
New StyleSheet With {.ExtensionSuite = ExtensionSuite.Dashboard}
)
@Html.DevExpress().GetScripts(
New Script With {.ExtensionSuite = ExtensionSuite.NavigationAndLayout},
New Script With {.ExtensionSuite = ExtensionSuite.Editors},
New Script With {.ExtensionSuite = ExtensionSuite.Dashboard}
)
<script>
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
dashboardControl.registerExtension(implementCustomExtension(dashboardControl));
}
</script>
</head>
<body>
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
@RenderBody()
</div>
<script src="scripts/customExtension/icon.js"></script>
<script src="scripts/customExtension/meta.js"></script>
<script src="scripts/customExtension/viewer.js"></script>
<script src="scripts/customExtension/customExtension.js"></script>
</body>
</html>