September 1, 2026

Add Search Boxes to Individual Dashboard Grids

PHPRunner and ASPRunner.NET dashboards can display several grids on one page. In this tutorial, we will add a separate search box to each grid so users can filter Customers, Products, or Employees without affecting the other dashboard elements.

The solution uses one reusable JavaScript function and a small amount of Custom CSS. The same code works in PHPRunner and ASPRunner.NET.

1. Preparing the dashboard

Create a dashboard and add the grid elements that need their own search boxes. This example uses the customers, products, and employees data sources.

You will pass these data source names to the search function in section 3. Use the names as they appear in your project, not the visible dashboard panel captions.

2. Adding the dashboard grid search function

Open Events → custom_function.js and add the following JavaScript:

function addDashboardGridSearch(dashboard, tableName) {
    var dashboardElement = dashboard.elements.find(function(element) {
        return element.table === tableName;
    });

    if (!dashboardElement) {
        console.warn("Dashboard table not found: " + tableName);
        return;
    }

    var containerId =
        "dashelement_" + dashboardElement.elementName + dashboard.id;
    var container = document.getElementById(containerId);

    if (!container) {
        console.warn("Dashboard container not found: " + containerId);
        return;
    }

    if (container.getAttribute("data-grid-search-initialized")) {
        return;
    }

    container.setAttribute("data-grid-search-initialized", "1");

    var searchValue = "";

    function search(input) {
        searchValue = input.value.trim();

        var parameters = {
            goto: 1
        };

        if (searchValue) {
            parameters.qs = searchValue;
        } else {
            parameters.a = "return";
            parameters.qs = "";
        }

        dashboard.loadPage(
            dashboardElement,
            {
                baseParams: parameters
            }
        );
    }

    function insertSearchBox() {
        var heading = container.querySelector(".panel-heading");
        var counter = container.querySelector(
            "[data-itemtype='details_found']"
        );

        if (!heading || !counter) {
            return;
        }

        if (heading.querySelector(".dashboard-grid-search")) {
            return;
        }

        var searchBox = document.createElement("div");
        var input = document.createElement("input");
        var clearButton = document.createElement("button");

        searchBox.className = "dashboard-grid-search";

        input.type = "search";
        input.className = "form-control input-sm";
        input.placeholder = "Search";
        input.value = searchValue;
        input.autocomplete = "off";
        input.setAttribute("aria-label", "Search " + tableName);

        clearButton.type = "button";
        clearButton.className = "btn btn-default btn-sm";
        clearButton.innerHTML = "×";
        clearButton.title = "Clear search";
        clearButton.setAttribute(
            "aria-label",
            "Clear " + tableName + " search"
        );

        searchBox.appendChild(input);
        searchBox.appendChild(clearButton);

        heading.classList.add("dashboard-grid-search-heading");
        counter.parentNode.classList.add("dashboard-grid-search-count");

        heading.insertBefore(searchBox, counter.parentNode);

        [
            "click",
            "mousedown",
            "mouseup",
            "touchstart"
        ].forEach(function(eventName) {
            searchBox.addEventListener(eventName, function(event) {
                event.stopPropagation();
            });
        });

        input.addEventListener("keydown", function(event) {
            if (event.key !== "Enter" && event.keyCode !== 13) {
                return;
            }

            event.preventDefault();
            event.stopPropagation();
            search(input);
        });

        clearButton.addEventListener("click", function(event) {
            event.preventDefault();
            event.stopPropagation();

            input.value = "";
            search(input);
        });
    }

    insertSearchBox();

    new MutationObserver(insertSearchBox).observe(
        container,
        {
            childList: true,
            subtree: true
        }
    );
}

The function finds one dashboard element by its data source name and adds a search control to that element’s panel heading. Pressing Enter passes the search phrase in qs and reloads only that grid. The clear button removes the stored search.

Dashboard grids replace their markup after an AJAX refresh. The MutationObserver restores the search box after that replacement while preserving the current search phrase.

3. Enabling search for the required grids

Open Events → Dashboard → Dashboard page → JavaScript OnLoad and call the function once for each grid:

addDashboardGridSearch(pageObj, "customers");
addDashboardGridSearch(pageObj, "products");
addDashboardGridSearch(pageObj, "employees");

Replace these values with the data source names used by your dashboard. Omit any dashboard element that should not have an individual search box.

4. Styling the search boxes

Open Style Editor, click ‘Modify CSS’, and add the following code:

.function-dashboard .panel-heading.dashboard-grid-search-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.function-dashboard
.panel-heading.dashboard-grid-search-heading
> .rnr-dbebrick {
    float: none !important;
    white-space: nowrap;
}

.function-dashboard .dashboard-grid-search {
    display: flex;
    flex: 0 1 180px;
    min-width: 120px;
    margin-left: auto;
}

.function-dashboard .dashboard-grid-search .form-control {
    height: 30px;
    min-width: 0;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px 0 0 4px;
}

.function-dashboard .dashboard-grid-search .btn {
    height: 30px;
    padding: 4px 9px;
    font-size: 16px;
    line-height: 16px;
    border-radius: 0 4px 4px 0;
}

.function-dashboard .dashboard-grid-search-count {
    flex: 0 0 auto;
    margin-left: 0;
    white-space: nowrap;
    font-size: 12px;
}

@media (max-width: 900px) {
    .function-dashboard
    .panel-heading.dashboard-grid-search-heading {
        flex-wrap: wrap;
    }

    .function-dashboard .dashboard-grid-search {
        order: 3;
        flex-basis: 100%;
        margin-left: 28px;
    }

    .function-dashboard .dashboard-grid-search-count {
        margin-left: auto;
    }
}

The desktop layout places the search box beside the record counter. Below 900 pixels, it moves to a separate line so the panel heading remains usable on smaller screens.

After rebuilding the project, open the Dashboard page and enter a phrase in one of the search boxes. Press Enter and confirm that only the corresponding grid is filtered. Click the clear button to restore the full grid, then repeat the test after collapsing and expanding the dashboard panel.

Add Search Boxes to Individual Dashboard Grids

1. Preparing the dashboard

2. Adding the dashboard grid search function

3. Enabling search for the required grids

4. Styling the search boxes

Leave a Reply

Sign up for the free email newsletter for news about our
database publishing software, tips, and more.

Resources

Company

1. Preparing the dashboard

2. Adding the dashboard grid search function

3. Enabling search for the required grids

4. Styling the search boxes

Related posts:

Leave a Reply