How to: Create a Simple Custom Item for the ASP.NET MVC Dashboard Extension

Aug 01, 2019
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.

wdd-custom-item

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspnet-mvc-dashboard-how-to-create-a-custom-dashboard-item-extension-t541040.

<!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 EXTENSION_NAME = "customExtension";

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

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

var EXTENSION_NAME = "customExtension";

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

<!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>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode