Question

Using jquery’s jqGrid plugin, I have it setup to do sorting, paging, and searching. Now what I need to do is add links in each row to redirect to different pages like edit for example based on that row’s id (I don’t want to use the jqGrid edit.) How would I create links within grid cells?

Answer 1

Was able to figure it out, note the gridComplete event:

jQuery(document).ready(function () {

        jQuery("#list").jqGrid({
            url: '/admin/campus/getnearbybusinesses',
            datatype: "json",
            colNames: ['Id', 'Name', 'Location', 'Verification', ''],
            rowNum: 15,
            /*rowList: [20, 40, 60],*/
            pager: '#pager',
            sortname: "Name",
            sortorder: "asc",
            viewrecords: true,
            caption: "Businesses",
            width: 930,
            height: 470,

            colModel: [
                { name: 'Id', hidden: true, sortable: false, search: false, width: 0 },
                { name: 'Name', index: 'Name', search: true, searchoptions: { sopt: ['cn']} },
                { name: 'Location', index: 'Location', search: false },
                { name: 'VerificationCode', index: 'VerificationCode', sortable: false, search: false, width: 40 },
                { name: 'action', index: 'action', sortable: false, search: false, width: 160 }
            ],

            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                cell: "cell",
                id: "id",
                userdata: 'rows'
            },

            gridComplete: function () {
                var grid = jQuery("#list");
                var ids = grid.jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    var rowData = $("#list").getGridParam('userData')[ids[i] - 1];
                    var id = rowData.Id;
                    var viewButton = "<a href='/business/home/" + id + "/index' class='button'>View</a>&nbsp;&nbsp;";
                    var upgradeDowngradeButton = "<a href='/admin/business/" + id + "/index' class='button'>Upgrade/Downgrade</a>&nbsp;&nbsp;";
                    var deleteButton = "<a href='javascript:void(0)' onclick='doDelete(" + id + ")' class='button'>Delete</a>";
                    grid.jqGrid('setRowData', ids[i], { action: viewButton + upgradeDowngradeButton + deleteButton });
                }
            }
        });

        jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });

    });