How to: Specify Dashboard Parameter Values on the Client Side in the Web Viewer

Aug 03, 2020
3 minutes to read

Important

This documentation applies to v16.2. Starting with v17.1, the ASPxDashboardViewer control is in maintenance mode. In v19.1, the new Web Dashboard Control replaces the old Web Dashboard Viewer. This means that the Web Dashboard Viewer will not be included in our installation packages. See our blog post for more information.

Refer to the following KB articles to learn how to migrate to ASPxDashboard / ASP.NET MVC Dashboard:

ASPxDashboardViewer -> ASPxDashboard

How to migrate from ASPxDashboardViewer to ASPxDashboard working in the ViewerOnly mode
MVCxDashboardViewer -> MVCxDashboard

How to migrate from DashboardViewerExtension to DashboardExtension working in the ViewerOnly mode

This example demonstrates how to change dashboard parameter values in the Web Viewer on the client side using the ASPxClientDashboardViewer.GetParameters method.

In this example, current parameter values are specified between the ASPxClientDashboardViewer.BeginUpdateParameters and ASPxClientDashboardViewer.EndUpdateParameters method calls using the ASPxClientDashboardParameter.SetValue method.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-specify-dashboard-parameter-values-on-the-client-side-in-the-web-viewer-t205300.

function specifyParameterValues() {
    var specifyValues = function () {
        var parameters = webViewer.GetParameters();
        var parameter1 = parameters.GetParameterByName("category1");
        var parameter2 = parameters.GetParameterByName("startDate1");
        webViewer.BeginUpdateParameters();
        parameter1.SetValue(parameter1.GetValues()[1].GetValue());
        parameter2.SetValue(new Date(1995, 3, 1));
        webViewer.EndUpdateParameters();
    };

    $("#buttonContainer").dxButton({
        clickAction: specifyValues,
        text: "Specify parameter values"
    });
};

using System;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.ConnectionParameters;

namespace Dashboard_SetParameterValues_Web {
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
        }

        protected void ASPxDashboardViewer1_ConfigureDataConnection(object sender, 
            ConfigureDataConnectionWebEventArgs e) {
            if (e.DataSourceName == "SQL Data Source 1") {
                // Gets connection parameters used to establish a connection to the database.
                Access97ConnectionParameters parameters =
                    (Access97ConnectionParameters)e.ConnectionParameters;
                string databasePath = Server.MapPath("App_Data/nwind.mdb");

                // Specifies the path to a database file.                    
                parameters.FileName = databasePath;
            }
        }
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
         Inherits="Dashboard_SetParameterValues_Web.WebForm1" %>

<%@ Register Assembly="DevExpress.Dashboard.v15.1.Web, Version=15.1.7.0, 
                                                       Culture=neutral, 
                                                       PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.DashboardWeb" 
    TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="buttonContainer" style="float: left;"></div>
    <div style="display: block; clear: both;"></div>
    <div>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            DashboardSource="~/App_Data/Dashboard.xml"
            onconfiguredataconnection="ASPxDashboardViewer1_ConfigureDataConnection" 
            ClientInstanceName="webViewer"
            ClientSideEvents-Loaded="function() { specifyParameterValues(); }" 
            Width="1200px" Height="600px">
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/ParameterValues.js") %>">
</script>

Imports System
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.ConnectionParameters

Namespace Dashboard_SetParameterValues_Web
    Partial Public Class WebForm1
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        End Sub

        Protected Sub ASPxDashboardViewer1_ConfigureDataConnection(ByVal sender As Object, _
                                           ByVal e As ConfigureDataConnectionWebEventArgs)
            If e.DataSourceName = "SQL Data Source 1" Then
                ' Gets connection parameters used to establish a connection to the database.
                Dim parameters As Access97ConnectionParameters =
                    CType(e.ConnectionParameters, Access97ConnectionParameters)
                Dim databasePath As String = Server.MapPath("App_Data/nwind.mdb")

                ' Specifies the path to a database file.                    
                parameters.FileName = databasePath
            End If
        End Sub
    End Class
End Namespace

function specifyParameterValues() {
    var specifyValues = function () {
        var parameters = webViewer.GetParameters();
        var parameter1 = parameters.GetParameterByName("category1");
        var parameter2 = parameters.GetParameterByName("startDate1");
        webViewer.BeginUpdateParameters();
        parameter1.SetValue(parameter1.GetValues()[1].GetValue());
        parameter2.SetValue(new Date(1995, 3, 1));
        webViewer.EndUpdateParameters();
    };

    $("#buttonContainer").dxButton({
        clickAction: specifyValues,
        text: "Specify parameter values"
    });
};

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="WebForm1.aspx.vb" 
         Inherits="Dashboard_SetParameterValues_Web.WebForm1" %>

<%@ Register Assembly="DevExpress.Dashboard.v15.1.Web, Version=15.1.7.0, 
                                                       Culture=neutral, 
                                                       PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.DashboardWeb" 
    TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="buttonContainer" style="float: left;"></div>
    <div style="display: block; clear: both;"></div>
    <div>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            DashboardSource="~/App_Data/Dashboard.xml"
            onconfiguredataconnection="ASPxDashboardViewer1_ConfigureDataConnection" 
            ClientInstanceName="webViewer"
            ClientSideEvents-Loaded="function() { specifyParameterValues(); }" 
            Width="1200px" Height="600px">
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/ParameterValues.js")%>">
</script>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode