to add button which will redirect to View Page of current row in JQGrid

Question

I am trying to add button instead of View column but i tried with formatter still button is not loading but records are coming for the rest of the colu

Answer 1

The code has some problems

1. options has no rowid property, but it has rowId property. You should change options.rowid to options.rowId
2. The formatter will be called during building the HTML fragment of the grid body. No element of the grid exist at the moment on the page. Thus you can't use $('#' + rowid).live('click', ...); at the moment.
3. The formatter have to return the HTML fragment, which will be placed in the corresponding cell (inside of <td>). One misses return button; at the end of the formatter.
4. There are exist well-known name conversion in JavaScript. One should use functions, which starts with capital letter only if you define the constructor of the new class. You see that ViewButton will be displayed in the other color to distinguish classes from other function. You should rename ViewButton to viewButton to hold the standard name conversion of JavaScript.
5. It's better don't specify index property in colModel. In the same way one should not include the properties with the defaul value, like key: false. To specify common property for many columns you can use cmTemplate property.
6. One should reduce the number of global functions, because the functions will be considerd as the properties of window object.
7. instead of usage hidden column with name: 'Id' one can specify id: 'Id' property of jsonReader. You use repeatitems: false property, which means that every item of input data has properties CountryName, StateName and so on. The default name of the id property (the rowid - the id of <tr> elements) is id, but you use Id instead. The property id: "Id" informs jqGrid about it.

The modified code could be about the following

$(function () {
    function viewButton(cellvalue, options, rowObject) {
        return "<button class=\"viewLineItem\" id=\"" +
            options.rowId + "\">View Line   Item</button>";
    }

    $("#grid").jqGrid({
        url: "/Location/LocationsList1",
        datatype: 'json',
        colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
        colModel: [
            { name: 'Id', key: true, hidden: true },
            { name: 'CountryName' },
            { name: 'StateName' },
            { name: 'CityName' },
            { name: 'Name' },
            { name: 'View', editable: false, formatter: viewButton }
        ],
        cmTemplate: { editable: true },
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Location',
        emptyrecords: 'No records to display',
        jsonReader: { repeatitems: false, id: "Id" }
    });

    $("#jqGridA").click(function (e) {
        var $td = $(e.target).closest("tr.jqgrow>td"),
            rowid = $td.parent().attr("id"),
            p = $(this).jqGrid("getGridParam");

        if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") {
            alert(rowid);
        }
    });
});

The last part of the above code ($("#jqGridA").click(...);) register one click handler for the whole grid. If the user clicks on any cell then the event handler will be called because of event bubbling. The e.target gives as the DOM element, which was clicked (for example the <button>). By using closest we can go to the outer <td> element, which parent is the row (<tr>) of the grid. The .attr("id") of the row is the rowid. Such binding works more effectively as binding click handler to every button inside of the grid.

By the way jqGrid has already one click event handler. One can use beforeSelectRow callback, because it will be called inside of the click handler. One should only don't forget to return true from the beforeSelectRow callback to inform jqGrid that you allow to select the row. The callback beforeSelectRow has already rowid as the first parameter, which simplify our code a little. The final code will be

$(function () {
    function viewButton(cellvalue, options, rowObject) {
        return "<button class=\"viewLineItem\" id=\"" +
            options.rowId + "\">View Line   Item</button>";
    }

    $("#grid").jqGrid({
        url: "/Location/LocationsList1",
        datatype: 'json',
        colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
        colModel: [
            { name: 'CountryName' },
            { name: 'StateName' },
            { name: 'CityName' },
            { name: 'Name' },
            { name: 'View', editable: false, formatter: viewButton }
        ],
        cmTemplate: { editable: true },
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Location',
        emptyrecords: 'No records to display',
        jsonReader: { repeatitems: false, id: "Id" },
        beforeSelectRow: function (rowid, e) {
            var $td = $(e.target).closest("tr.jqgrow>td"),
                p = $(this).jqGrid("getGridParam");

            if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") {
                alert(rowid);
            }
        }
    });
});