September 5, 2026

Add a Custom Row Actions Menu to a Data Grid

List pages often contain several actions for every record. Displaying each action as a separate button can make the grid unnecessarily wide, especially on smaller screens.

In this tutorial, we will add one menu button to each grid row. The menu will open View, Edit, Copy, and related-record pages, process Delete with confirmation, and include an Archive placeholder for project-specific code. The same approach works in PHPRunner and ASPRunner.NET.

1. Adding the row actions button

Open the required List page in Page Designer and switch the grid to Advanced Grid mode. Select Insert – Custom button – New button, then place the button inside the grid so every record receives its own copy.

Clear the button label, select the bars icon, and set its Item ID to row_actions. The Item ID is important because the JavaScript uses it to find the button belonging to the current record.

This example uses the customers table, id as its key field, and CustomerID to open related orders. Replace those names where necessary. The table must have a key field selected on the Choose pages screen.

Keep the standard Edit button in the grid with the Item ID grid_edit. The menu will trigger that button, preserving the Edit behavior configured in Page Designer, including popup mode.

2. Building the menu in Client Before

Open the custom button code and add the following JavaScript to Client Before:

$(".phprunner-row-actions-menu").remove();

var btn = pageObj.getItemButton("row_actions", rowData.id);

var menu = $(
    '<div class="phprunner-row-actions-menu">' +
        '<div class="row-action" data-action="view">View</div>' +
        '<div class="row-action" data-action="edit">Edit</div>' +
        '<div class="row-action" data-action="orders">View orders</div>' +
        '<div class="row-action" data-action="delete">Delete</div>' +
        '<div class="row-action" data-action="copy">Create a copy</div>' +
        '<div class="row-action" data-action="archive">Archive</div>' +
    '</div>'
);

$("body").append(menu);

var pos = btn.offset();
var top = pos.top;
var left = pos.left + btn.outerWidth() + 4;

if (
    pos.top - $(window).scrollTop() + menu.outerHeight()
        > $(window).height()
) {
    top = pos.top - menu.outerHeight() + btn.outerHeight();
}

if (
    left + menu.outerWidth()
        > $(window).scrollLeft() + $(window).width()
) {
    left = pos.left - menu.outerWidth() - 4;
}

menu.css({
    top: top,
    left: left
});

menu.on("click", ".row-action", function(event) {
    event.stopPropagation();

    var action = $(this).data("action");
    menu.remove();

    switch (action) {
        case "view":
            Runner.displayPopup({
                url: Runner.pages.getUrl("customers", "view")
                    + "?editid1="
                    + encodeURIComponent(rowData.keys[0]),
                width: 800,
                height: 600,
                header: "View customer"
            });
            break;

        case "edit":
            pageObj.getItemButton(
                "grid_edit",
                rowData.id
            ).click();
            break;

        case "orders":
            var url = Runner.pages.getUrl("orders", "list");
            url += "?masterkey1="
                + encodeURIComponent(
                    row.getFieldValue("CustomerID")
                )
                + "&mastertable=customers";
            location.href = url;
            break;

        case "delete":
            swal("Would you like to delete this record?", {
                buttons: {
                    cancel: "No",
                    proceed: {
                        text: "Yes, delete it",
                        value: "proceed"
                    }
                }
            }).then(function(value) {
                if (value === "proceed") {
                    params["action"] = "delete";
                    submit();
                }
            });
            break;

        case "copy":
            location.href = Runner.pages.getUrl(
                "customers",
                "add"
            ) + "?copyid1="
                + encodeURIComponent(rowData.keys[0]);
            break;

        case "archive":
            // Add the code that archives the current record here.
            break;
    }
});

var closeTimer;

menu.on("mouseleave", function() {
    closeTimer = setTimeout(function() {
        menu.remove();
    }, 300);
});

menu.on("mouseenter", function() {
    clearTimeout(closeTimer);
});

return false;

The button and the current record are identified through rowData.id and rowData.keys. If the menu would extend beyond the bottom or right side of the browser window, the positioning code moves it to the opposite side of the button.

The Copy action opens the Add page in Copy mode. This example has one key field, so it uses copyid1. Tables with composite keys also require copyid2, copyid3, and so on.

3. Processing Delete on the server

The Delete action is the only menu command that changes the database. Add the appropriate code to the custom button’s Server section.

The code verifies the current user’s Delete permission and obtains the record from the server-side button context. It does not trust a record ID supplied by the browser.

PHP

$result["action"] = "";

if ($params["action"] === "delete") {
    $rights = Security::getPermissions("customers");

    if (empty($rights["D"])) {
        $result["message"] =
            "You do not have permission to delete this record.";
    } else {
        $record = $button->getCurrentRecord();

        if (!$record) {
            $result["message"] = "The record could not be found.";
        } else {
            $sql = DB::PrepareSQL(
                "DELETE FROM customers WHERE id=:1",
                $record["id"]
            );

            if (DB::Exec($sql)) {
                $result["action"] = "delete";
            } else {
                $result["message"] =
                    "The record could not be deleted.";
            }
        }
    }
}

result["action"] = "";

if (Convert.ToString(parameters["action"]) == "delete")
{
    dynamic rights = Security.getPermissions("customers");

    if (!XVar.Pack(rights["D"]))
    {
        result["message"] =
            "You do not have permission to delete this record.";
    }
    else
    {
        dynamic record = button.getCurrentRecord();

        if (!XVar.Pack(record))
        {
            result["message"] = "The record could not be found.";
        }
        else
        {
            dynamic sql = DB.PrepareSQL(
                "DELETE FROM customers WHERE id=:1",
                record["id"]
            );

            if (XVar.Pack(DB.Exec(sql)))
            {
                result["action"] = "delete";
            }
            else
            {
                result["message"] =
                    "The record could not be deleted.";
            }
        }
    }
}

Replace customers and id with the actual table and key field. If the database prevents deleting records that have related rows, either configure the required cascade behavior or replace Delete with the business rule appropriate for your application.

4. Refreshing the List page in Client After

Add the following JavaScript to Client After:

if (result["message"]) {
    swal(result["message"]);
}

if (result["action"] === "delete") {
    pageObj.reload({
        a: "reload"
    });
}

The grid reloads only after the server confirms that the record was deleted.

5. Styling the actions menu

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

.phprunner-row-actions-menu {
    position: absolute;
    z-index: 10000;
    min-width: 180px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.phprunner-row-actions-menu .row-action {
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.phprunner-row-actions-menu .row-action:hover {
    background: #f5f5f5;
}

After rebuilding the project, open the Customers List page and test the menu on several rows. Confirm that View opens in a popup, Edit follows the configured Edit-button behavior, Copy opens a prefilled Add page, related orders open for the correct customer, and Delete refreshes the grid only after confirmation.

Add a Custom Row Actions Menu to a Data Grid

1. Adding the row actions button

2. Building the menu in Client Before

3. Processing Delete on the server

4. Refreshing the List page in Client After

5. Styling the actions menu

Leave a Reply

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

Resources

Company

1. Adding the row actions button

2. Building the menu in Client Before

3. Processing Delete on the server

4. Refreshing the List page in Client After

5. Styling the actions menu

Related posts:

Leave a Reply