Enhancement of formatter:"actions"

Introduction. formatter: "actions" in jqGrid

Starting with version 3.8.2 jqGrid have formatter: "actions" which can be used to create the column having 4 buttons two from there will be visible and another two will be hidden. It's the buttons "Edit", "Delete" which are visible initially and the buttons "Save" and "Cancel" which will be visible after the editing will be started by click on the "Edit" button. The content of the column "action" looks like

or like

in case of usage Font Awesome icons.

Later jqGrid introduced editformbutton: true option which can be specified in formatoptions: {...} which allows the usage of form editing instead of inline editing on click on "Edit" button.

I posted the answer and this one which shows how one could add custom inline button in the column added by formatter: "action". The code is relatively long and slowly because it modifies previously created column content instead of don't create new buttons directly. It follows web browser reflow and works now so quickly as it could be.

Custom action buttons in free jqGrid 4.9

New feature of formatter: "action" provides simple way to create custom buttons together with the standard editing buttons. To implement this one need specify custom property either in formatoptions: {...} of the column having formatter: "actions" or inside of option actionsNavOptions of jqGrid. The custom property is array of objects which have at least the properties:

• action - type string, specify unique name of new button action.
• onClick - callback function which will be called when the user clicks on the button. The only parameter options of the callback is object with the properties: rowid, event, action, options. The properties will be described later.
• position - type string, optional, can be "first" or "last" (default). It specify whether the button should be added before of after the standard "Edit" and "Delete" buttons.

For example, the demo use the following definition of custom parameter:

custom: [
    { action: "addUser", position: "first",
        onClick: function (options) {
            alert("Add user, rowid=" + options.rowid);
        } },
    { action: "addToCart", position: "first",
        onClick: function (options) {
            alert("Add to Cart, rowid=" + options.rowid);
        } },
    { action: "deleteUser",
        onClick: function (options) {
            alert("Delete user, rowid=" + options.rowid);
        } }
]

The first two items ("addUser" and "addToCart") contains position: "first" property and the buttons will be displayed before the standard Edit and Delete buttons. The last button ("deleteUser") will be added after the standard action buttons. The displayed results on the demo looks like on the picture below

To specify the icon and the tooltip text for the custom buttons one need to add in formatoptions: {...} or in actionsNavOptions the properties which names are build based on the name of action property of custom items. The first button have action: "addUser" to we should add addUsericon ("addUser" + "icon") and addUsertitle ("addUser" + "title") properties which specify the icon and the tooltip. The full options used in the demo looks as following:

colNames: ["", ...],
colModel: [
    { name: "act", template: "actions", width: 94 }, // 94 = 2+2 pagging + 18*5
    ...
],
actionsNavOptions: {
    addUsericon: "fa-user-plus",
    addUsertitle: "Add user",
    deleteUsericon: "fa-user-times",
    deleteUsertitle: "Delete user",
    addToCarticon: "fa-cart-plus",
    addToCarttitle: "Add item to the cart",
    custom: [
        { action: "addUser", position: "first",
            onClick: function (options) {
                alert("Add user, rowid=" + options.rowid);
            } },
        { action: "addToCart", position: "first",
            onClick: function (options) {
                alert("Add to Cart, rowid=" + options.rowid);
            } },
        { action: "deleteUser",
            onClick: function (options) {
                alert("Delete user, rowid=" + options.rowid);
            } }
    ]
}

The structure of the standard "Edit" button looks

<div title="Edit selected row" class="ui-pg-div ui-inline-edit" id="jEditButton_70"
     onmouseover="..." onmouseout="..." onclick="...">
  <span class="fa ui-state-default fa-fw fa-pencil"></span>
</div>

The new button, for example "addUser" button, will be build based on the same schema:

<div title="Add user" class="ui-pg-div ui-inline-addUser" id="jAddUserButton_70"
     onmouseover="..." onmouseout="..." onclick="...">
  <span class="fa ui-state-default fa-fw fa-user-plus"></span>
</div>

So one can use classes ui-inline-addUser ("ui-inline-" + "addUser") or the id jAddUserButton_70 ("j" + "AddUser" + "Button_" + rowid) to access or customize the buttons.