jqGrid - onClickButton replace cell values with tooltip value and vice versa

Question

I've got a custom button set up for which I'd like the click event to substitute the value of the cell value with the value of that particular cell's tooltip value. Clicking the button again reverses the change to normal.

Is this at all possible?

Grid looks like...

$("#grid").jqGrid({
        url: "/Controller/ActionMethod",
        datatype: 'json',
        mtype: 'Get',
        //postData: { mId: getParameterByName('mId') },
        colNames: [Id', 'M-Val', Date' 'H1', 'H2', 'H3'],
        colModel: [
            { key: true, name: 'Id', index: 'Id', editable: true },
            { key: false, name: 'M-Val', index: 'M-Val', editable: true },
            {
                key: false, name: 'DateField', index: 'DateField', editable: true, formatter: 'date', width: 150,
                formatoptions: { srcFormat: 'ISO8601Long', newformat: 'd/m/Y ' }, searchoptions: { sopt: ['eq', 'ne', 'lt', 'gt'] }
            },
            { key: false, name: 'H1', index: 'H1', editable: true, width: 60, formatter: colorCode, cellattr: colorCodeCell },
            { key: false, name: 'H2', index: 'H2', editable: true, width: 60, formatter: colorCode, cellattr: colorCodeCell },
            { key: false, name: 'H3', index: 'H3', editable: true, width: 60, formatter: colorCode, cellattr: colorCodeCell },        ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: '',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        shrinkToFit: false,
        multiselect: false
    }).navGrid('#pager', { edit: false, add: false, del: false, search: true, refresh: true }, {}, {}, {}, { multipleSearch: true, searchOnEnter: true, closeOnEscape: true }, {})
        //Button to view Tiers
        .jqGrid('navButtonAdd', '#pager', {
            caption: "", buttonicon: "ui-icon-info",
            onClickButton: function () {
                //TODO:
            }, position: "last", title: "View Tier Info", cursor: "pointer"
        });
    //$("#grid").jqGrid('groupingGroupBy', ['Id', 'M-Val', 'DateField']);
});

Answer 1

Worked it out the following way:

.jqGrid('navButtonAdd', '#pager', {
        caption: "", buttonicon: "ui-icon-info",
        onClickButton: function () {

            var grid = jQuery("#grid"), rows = grid[0].rows, cRows = rows.length,
            iRow, rowId, row, cellsOfRow;

            for (iRow = 0; iRow < cRows; iRow++) {
                row = rows[iRow];
                if ($(row).hasClass("jqgrow")) {
                    cellsOfRow = row.cells;

                    for (var i = 0; i < cellsOfRow.length; i++) {
                        var title = cellsOfRow[i].title;
                        var innerHTML = cellsOfRow[i].innerHTML
                        cellsOfRow[i].innerHTML = title;
                        cellsOfRow[i].title = innerHTML;
                    }
                }
            }

        }, position: "last", title: "View Info", cursor: "pointer"
    });

Now whenever I click the specified button, the cell title value and innerHTML DOM values swap.

Code snippet for row-cell iteration was obtained from the answer to this question.

Hope this helps someone else!