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

Yes it is. Do you have some code? Questions like this tend to get downvoted real fast and deleted. — Mouser, Mar 09 '15 at 19:46

score 1 · Answer 1 · answered Mar 09 '15 at 19:52

1

Just a demo of what you mean:

document.querySelector(".swap").addEventListener("click", function(){
  var element = this.parentElement.parentElement.children[0]; //td
  var tooltip = element.title;
  var content = element.textContent;
  
  //swap the values
  element.title = content;
  element.textContent = tooltip;
}, false)

<table>
  <tr>
    <td title="Tooltip">regular</td><td><button class="swap">swap</button></td>
  </tr>
</table>

answered Mar 09 '15 at 19:52

Mouser

13,132
3
28
54

Solved it a different way but thanks for your help. It provided a good starting point for me. +1 for that. – RizJa Mar 10 '15 at 14:55

score 1 · Accepted Answer · edited May 23 '17 at 11:50

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!

Nice that my code provided a base for your answer. It's good to see people creating answers themselves. The best way of learning. +1. — Mouser, Mar 10 '15 at 17:35

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

2 Answers2