How to: Apply Master Filtering in the ASP.NET MVC Dashboard

• Aug 01, 2019
• 4 minutes to read

The following example demonstrates how to apply master filtering in the ASP.NET MVC Dashboard on the client side.

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

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspnet-mvc-dashboard-how-to-apply-master-filtering-in-code-t490955.

Global.asax.vb

Imports DevExpress.DashboardWeb
Imports DevExpress.DashboardWeb.Mvc
Imports System
Imports System.Web.Mvc
Imports System.Web.Routing

Namespace MvcDashboard_SetMasterFilter
    Public Class MvcApplication
        Inherits System.Web.HttpApplication

        Public Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}")
            routes.MapDashboardRoute()

            routes.MapRoute("Default", "{controller}/{action}/{id}",
                            New With {Key .controller = "Home", Key .action = "Index", Key .id = UrlParameter.Optional})
        End Sub

        Protected Sub Application_Start()
            AreaRegistration.RegisterAllAreas()
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
            RegisterRoutes(RouteTable.Routes)
            ModelBinders.Binders.DefaultBinder = New DevExpress.Web.Mvc.DevExpressEditorsBinder()
            AddHandler DevExpress.Web.ASPxWebControl.CallbackError, AddressOf Application_Error

            DashboardConfigurator.Default.SetDashboardStorage(New DashboardFileStorage("~/App_Data/"))
        End Sub

        Protected Sub Application_Error(ByVal sender As Object, ByVal e As EventArgs)
            Dim exception As Exception = System.Web.HttpContext.Current.Server.GetLastError()
        End Sub
    End Class
End Namespace

HomeController.vb

Imports System.Web.Mvc

Namespace MvcDashboard_SetMasterFilter.Controllers
    Public Class HomeController
        Inherits Controller

        Public Function Index() As ActionResult
            Return View()
        End Function
    End Class
End Namespace

Index.cshtml (VB.NET)

<div id="setMasterFilterButton" style="float: left; margin-left: 150px;"></div>
<div id="clearMasterFilterButton" style="float: left; margin-left: 150px;"></div>
<div style="position: absolute; left: 0; right: 0; top:50px; bottom:0;">
    @Html.DevExpress().Dashboard(settings =>
{
    settings.Name = "webDashboard";
    settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.Viewer;
    settings.ClientSideEvents.Init = "function() { initializeFilters(); }";
    }).GetHtml()
</div>

MasterFiltering.js (VB.NET)

function initializeFilters() {
    function applyFilters() {
        var selectedValues = [['UK', 'Anne Dodsworth'], ['USA', 'Andrew Fuller']];
        var selectedRange = new ASPxClientDashboardRangeFilterSelection();
        selectedRange.Minimum = new Date(2015, 1, 1);
        selectedRange.Maximum = new Date(2015, 12, 31);

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

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

    function setRange(itemName, selectedRange) {
        if (webDashboard.CanSetMasterFilter(itemName)) {
            webDashboard.SetRange(itemName, selectedRange);
        }
    }

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

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

    $("#setMasterFilterButton").dxButton({
        text: "Apply Filters",
        onClick: applyFilters

    });
    $("#clearMasterFilterButton").dxButton({
        text: "Clear Filters",
        onClick: clearFilters
    });
};

_Layout.cshtml (VB.NET)

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/MasterFiltering.js")" type="text/javascript"></script>

    @Html.DevExpress().GetStyleSheets( 
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Dashboard }
    )

</head>

<body>
    @RenderBody()
</body>
</html>

Index.cshtml (C#)

<div id="setMasterFilterButton" style="float: left; margin-left: 150px;"></div>
<div id="clearMasterFilterButton" style="float: left; margin-left: 150px;"></div>
<div style="position: absolute; left: 0; right: 0; top:50px; bottom:0;">
    @Html.DevExpress().Dashboard(settings =>
{
    settings.Name = "webDashboard";
    settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.Viewer;
    settings.ClientSideEvents.Init = "function() { initializeFilters(); }";
    }).GetHtml()
</div>

_Layout.cshtml (C#)

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/MasterFiltering.js")" type="text/javascript"></script>

    @Html.DevExpress().GetStyleSheets( 
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Dashboard }
    )

</head>

<body>
    @RenderBody()
</body>
</html>

Global.asax.cs

using DevExpress.DashboardWeb;
using DevExpress.DashboardWeb.Mvc;
using System;
using System.Web.Mvc;
using System.Web.Routing;

namespace MvcDashboard_SetMasterFilter
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");
            routes.MapDashboardRoute();

            routes.MapRoute(
                "Default",
                "{controller}/{action}/{id}",
                new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
            ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder();
            DevExpress.Web.ASPxWebControl.CallbackError += Application_Error;

            DashboardConfigurator.Default.SetDashboardStorage(new DashboardFileStorage(@"~/App_Data/"));
        }

        protected void Application_Error(object sender, EventArgs e)
        {
            Exception exception = System.Web.HttpContext.Current.Server.GetLastError();
        }
    }
}

MasterFiltering.js (C#)

function initializeFilters() {
    function applyFilters() {
        var selectedValues = [['UK', 'Anne Dodsworth'], ['USA', 'Andrew Fuller']];
        var selectedRange = new ASPxClientDashboardRangeFilterSelection();
        selectedRange.Minimum = new Date(2015, 1, 1);
        selectedRange.Maximum = new Date(2015, 12, 31);

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

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

    function setRange(itemName, selectedRange) {
        if (webDashboard.CanSetMasterFilter(itemName)) {
            webDashboard.SetRange(itemName, selectedRange);
        }
    }

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

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

    $("#setMasterFilterButton").dxButton({
        text: "Apply Filters",
        onClick: applyFilters

    });
    $("#clearMasterFilterButton").dxButton({
        text: "Clear Filters",
        onClick: clearFilters
    });
};

HomeController.cs

using System.Web.Mvc;

namespace MvcDashboard_SetMasterFilter.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}