The requested page is not available for the requested platform. You are viewing the content for Default platform.

Dashboard.UserData Property

Gets or sets custom data to be saved to the dashboard XML definition.

Namespace: DevExpress.DashboardCommon

Assembly: DevExpress.Dashboard.v18.2.Core.dll


public XElement UserData { get; set; }
Public Property UserData As XElement

Property Value

Type Description

A XElement object that specifies the XML element.


The content of the created XElement object is added to the dashboard XML definition. You can load the saved custom data using the static Dashboard.LoadUserDataFromXml method.


This example demonstrates how to save the custom data related to a dashboard to the dashboard XML definition and how to load this data later. In this example, the standard 'Save' menu item removed from the Web Dashboard menu. A new 'Save As' menu item allows end-users to add a custom comment appended to the dashboard XML definition. Moreover, the current dashboard state and modified date is added to the XML definition.

You can load dashboards containing custom data using the 'Open' menu item. A comment and modified date form the selected dashboard is displayed within the form at the top of the web page. The loaded dashboard state is applied to the dashboard using a client-side API.

The following API is used to implement these capabilities:

function onBeforeRender(sender, e) {
    // Gets an underlying part of the ASPxClientDashboard control and removes the 'Save' item from a standard menu. 
    var innerControl = sender.GetDashboardControl();
    var toolbox = innerControl.findExtension("toolbox");

    // Specifies which actions will be performed on clicking a custom menu item (which is added below using addMenuItem).
    var clickAction = function () {
        // Creates a popup that will display a text box allowing end-users to specify a comment to be appended to the dashboard XML file.
        var popup = $("#popupContainer").dxPopup({
            title: "Save As",
            visible: true,
            width: 600,
            height: 200,
            onShown: function () {
                    placeholder: 'Enter any comment...',
                    showClearButton: true
            toolbarItems: [{
                toolbar: "bottom",
                widget: "dxButton",
                location: "after",
                options: {
                    text: "Save",
                    onClick: saveButtonAction
            }, {
                toolbar: "bottom",
                widget: "dxButton",
                location: "after",
                options: {
                    text: "Cancel",
                    onClick: cancelButtonAction

    // Passes the custom data (a comment, a modified date and a current dashboard state) to the server side.
    // On the server side, the CustomDataCallback event is used to obtain and parse these values.
    var saveButtonAction = function () {
        var params = {
            dashboardJson: JSON.stringify(innerControl.dashboard().getJSON()),
            dateModified: new Date(,
            comment: $("#textBoxContainer").dxTextBox("instance").option("text"),
            dashboardState: webDashboard.GetDashboardState()

    var cancelButtonAction = function () {        

    // Adds a menu item that will be used to perform a custom saving routine.
    toolbox.addMenuItem(new DevExpress.Dashboard.DashboardMenuItem("save-as-item", "Save As", 108, 0, clickAction));

function onDashboardChanged(sender, e) {
    // Displays the custom data contained in the UserData element. 
    // Note that CustomJSProperties event is used to pass data from the server to client side.
    var form = $("#formContainer").dxForm({
        formData: {
            modified: webDashboard.cpDateModified,
            comment: webDashboard.cpComment
        items: ["modified", "comment"],
        readOnly: true
    // Applies a dashboard state obtained from the UserData element.
    if(webDashboard.cpDashboardState !=null)
See Also