How to: Apply Master Filtering in the ASP.NET Web Forms Dashboard Control

  • 2 minutes to read

The following example demonstrates how to apply master filtering in the Web 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.

View Example

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