How to: Apply Master Filtering in ASPxDashboardViewer

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

The following example demonstrates how to apply master filtering in ASPxDashboardViewer on the client side.

In this example, the ASPxClientDashboardViewer.SetMasterFilter method is used to select required rows in the Grid dashboard item while the ASPxClientDashboardViewer.SetRange method is called to select the required range in the Range Filter dashboard item. These methods are called in the ASPxClientButton.Click event handler of the ASPxButton1.

Note

Note that in OLAP mode, unique names are used instead of values.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-apply-master-filtering-in-aspxdashboardviewer-e5104.

function setMasterFilters() {
    var selectedValues = [['UK', 'Anne Dodsworth'], ['USA', 'Andrew Fuller']];
    var selectedRange = new ASPxClientDashboardRangeFilterSelection();
    selectedRange.Minimum = new Date(95, 1, 1);
    selectedRange.Maximum = new Date(96, 1, 1);

    setMasterFilter('gridDashboardItem1', selectedValues);
    setRange('rangeFilterDashboardItem1', selectedRange);
}

function clearMasterFilters() {
    clearMasterFilter('gridDashboardItem1');
    clearMasterFilter('rangeFilterDashboardItem1');
}

function setMasterFilter(itemName, selectedValues) {
    if (WebViewer.CanSetMasterFilter(itemName)) {
        WebViewer.SetMasterFilter(itemName, selectedValues);
    }
}

function setRange(itemName, selectedRange) {
    WebViewer.SetRange(itemName, selectedRange);
}

function clearMasterFilter(itemName) {
    if (WebViewer.CanClearMasterFilter(itemName)) {
        WebViewer.ClearMasterFilter(itemName);
    }
}

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

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

<%@ Register assembly="DevExpress.Web.v15.1, Version=15.1.7.0, 
             Culture=neutral, 
             PublicKeyToken=b88d1754d700e49a" 
             namespace="DevExpress.Web" 
             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>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            DashboardSource="~/App_Data/Dashboard.xml"
            onconfiguredataconnection="ASPxDashboardViewer1_ConfigureDataConnection" 
            ClientInstanceName="WebViewer">
        </dx:ASPxDashboardViewer>                
        <dx:ASPxButton ID="ASPxButton1" runat="server" Text="SetMasterFilter" AutoPostBack=False>        
            <ClientSideEvents Click="function(s, e) { setMasterFilters(); }" />
        </dx:ASPxButton>
        <dx:ASPxButton ID="ASPxButton2" runat="server" Text="ClearMasterFilter" AutoPostBack=False>
            <ClientSideEvents Click="function(s, e) { clearMasterFilters(); }" />
        </dx:ASPxButton>
    </div>     
    </form>
</body>
</html>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/MasterFiltering.js")%>"></script>

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

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

<%@ Register assembly="DevExpress.Web.v15.1, Version=15.1.7.0, 
             Culture=neutral, 
             PublicKeyToken=b88d1754d700e49a" 
             namespace="DevExpress.Web" 
             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>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            DashboardSource="~/App_Data/Dashboard.xml"
            onconfiguredataconnection="ASPxDashboardViewer1_ConfigureDataConnection" 
            ClientInstanceName="WebViewer">
        </dx:ASPxDashboardViewer>                
        <dx:ASPxButton ID="ASPxButton1" runat="server" Text="SetMasterFilter" AutoPostBack=False>        
            <ClientSideEvents Click="function(s, e) { setMasterFilters(); }" />
        </dx:ASPxButton>
        <dx:ASPxButton ID="ASPxButton2" runat="server" Text="ClearMasterFilter" AutoPostBack=False>
            <ClientSideEvents Click="function(s, e) { clearMasterFilters(); }" />
        </dx:ASPxButton>
    </div>     
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/MasterFiltering.js") %>"></script>

function setMasterFilters() {
    var selectedValues = [['UK', 'Anne Dodsworth'], ['USA', 'Andrew Fuller']];
    var selectedRange = new ASPxClientDashboardRangeFilterSelection();
    selectedRange.Minimum = new Date(95, 1, 1);
    selectedRange.Maximum = new Date(96, 1, 1);

    setMasterFilter('gridDashboardItem1', selectedValues);
    setRange('rangeFilterDashboardItem1', selectedRange);
}

function clearMasterFilters() {
    clearMasterFilter('gridDashboardItem1');
    clearMasterFilter('rangeFilterDashboardItem1');
}

function setMasterFilter(itemName, selectedValues) {
    if (WebViewer.CanSetMasterFilter(itemName)) {
        WebViewer.SetMasterFilter(itemName, selectedValues);
    }
}

function setRange(itemName, selectedRange) {
    WebViewer.SetRange(itemName, selectedRange);
}

function clearMasterFilter(itemName) {
    if (WebViewer.CanClearMasterFilter(itemName)) {
        WebViewer.ClearMasterFilter(itemName);
    }
}

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode