How to: Create a Simple Custom Item for the ASP.NET Web Forms Dashboard Control
- 4 minutes to read
This example shows you how to create a simple custom item displaying a list of dimension values. This item can be filtered by other master filter items and also contains one custom property that specifies whether to display the field header caption in the list.
To learn more information about the custom item creating, see Custom Item Creating.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/aspxdashboard-how-to-create-a-custom-dashboard-item-extension-t509294.
- icon.js (C#)
- meta.js (C#)
- customExtension.js (C#)
- viewer.js (C#)
- Default.aspx (C#)
- viewer.js (VB.NET)
- icon.js (VB.NET)
- Default.aspx (VB.NET)
- meta.js (VB.NET)
- customExtension.js (VB.NET)
// Defines a custom item icon.
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 EXTENSION_NAME = "customExtension";
// Defines a custom item meta description.
var customItemExtensionMeta = {
bindings: [{
propertyName: 'customBinding',
dataItemType: 'Dimension',
array: false,
displayName: 'Custom Binding',
emptyPlaceholder: 'Add Dimension',
selectedPlaceholder: 'Configure Dimension'
}],
properties: [{
propertyName: 'customProperty',
editor: DevExpress.Dashboard.Metadata.editorTemplates.buttonGroup,
displayName: 'Include Field Header',
sectionName: 'Custom Properties',
values: {
Include: 'CustomItemStringId.CustomPropertyValueInclude',
Exclude: 'CustomItemStringId.CustomPropertyValueExclude'
},
defaultVal: 'Exclude'
}],
icon: 'customItemIcon',
title: 'Simple Custom Item',
index: 0
};
DevExpress.Localization.addCultureInfo({
messages: {
// Custom Property
'CustomItemStringId.CustomPropertyValueInclude': "Include",
'CustomItemStringId.CustomPropertyValueExclude': "Exclude"
}
});
// Creates function that implements a custom item extension.
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);
}
}
};
// Specifies an item viewer behavior.
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));
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DXSample.Default" %>
<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!---->
<title>Web Dashboard Custom Item Sample</title>
<style>
</style>
<script type="text/javascript">
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
dashboardControl.registerExtension(implementCustomExtension(dashboardControl));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0">
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" DashboardStorageFolder="~/App_Data" Width="100%" Height="100%">
<ClientSideEvents BeforeRender="onBeforeRender" />
</dx:ASPxDashboard>
</div>
</form>
<script src="scripts/customExtension/meta.js" type="text/javascript"></script>
<script src="scripts/customExtension/icon.js" type="text/javascript"></script>
<script src="scripts/customExtension/viewer.js" type="text/javascript"></script>
<script src="scripts/customExtension/customExtension.js" type="text/javascript"></script>
</body>
</html>
// Specifies an item viewer behavior.
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));
// Defines a custom item icon.
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>';
<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="DXSample.Default" %>
<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!---->
<title>Web Dashboard Custom Item Sample</title>
<style>
</style>
<script type="text/javascript">
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
dashboardControl.registerExtension(implementCustomExtension(dashboardControl));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0">
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" DashboardStorageFolder="~/App_Data" Width="100%" Height="100%">
<ClientSideEvents BeforeRender="onBeforeRender" />
</dx:ASPxDashboard>
</div>
</form>
<script src="scripts/customExtension/meta.js" type="text/javascript"></script>
<script src="scripts/customExtension/icon.js" type="text/javascript"></script>
<script src="scripts/customExtension/viewer.js" type="text/javascript"></script>
<script src="scripts/customExtension/customExtension.js" type="text/javascript"></script>
</body>
</html>
var EXTENSION_NAME = "customExtension";
// Defines a custom item meta description.
var customItemExtensionMeta = {
bindings: [{
propertyName: 'customBinding',
dataItemType: 'Dimension',
array: false,
displayName: 'Custom Binding',
emptyPlaceholder: 'Add Dimension',
selectedPlaceholder: 'Configure Dimension'
}],
properties: [{
propertyName: 'customProperty',
editor: DevExpress.Dashboard.Metadata.editorTemplates.buttonGroup,
displayName: 'Include Field Header',
sectionName: 'Custom Properties',
values: {
Include: 'CustomItemStringId.CustomPropertyValueInclude',
Exclude: 'CustomItemStringId.CustomPropertyValueExclude'
},
defaultVal: 'Exclude'
}],
icon: 'customItemIcon',
title: 'Simple Custom Item',
index: 0
};
DevExpress.Localization.addCultureInfo({
messages: {
// Custom Property
'CustomItemStringId.CustomPropertyValueInclude': "Include",
'CustomItemStringId.CustomPropertyValueExclude': "Exclude"
}
});
// Creates function that implements a custom item extension.
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);
}
}
};