Question

I am using JQGrid now.
First of all, I would like to create listing grid which has edit and delete button.
As this grid has edit and delete button, when user click those buttons I want user to redirect to next page according to clicked row id.

<script type="text/javascript">
jQuery(document).ready(function () {

    var test = function () {
        alert("****");
    };

    var grid = $("#list");

    grid.jqGrid({
        url: '/Supplier/Select_SupplierByX/',
        datatype: 'json',
        mtype: 'POST',
        postData: {
            SupplierName: function () { return $("#txtSupplierName").val(); },
            Address: function () { return $("#txtAddress").val(); },
            Phone: function () { return $("#txtPhone").val(); }
        },
        colNames: ['Actions', 'SupplierID', 'SupplierName', 'Address', 'Phone'],
        colModel: [
                      { name: 'act', index: 'act', width: 25, sortable: false },
                      { name: 'SupplierID', index: 'SupplierID', width: 40, align: 'left', editable: false, searchtype: "integer" },
                      { name: 'SupplierName', index: 'SupplierName', width: 40, align: 'left', editable: false },
                      { name: 'Address', index: 'Address', width: 40, align: 'left', editable: false },
                      { name: 'Phone', index: 'Phone', width: 40, align: 'left', editable: false }
                  ],
        loadtext: 'Loading Supplier Information...',
        pager: jQuery('#pager'),
        rowNum: 10,
        sortname: 'SupplierName',
        sortorder: "asc",
        rownumbers: true,
        sortable: true,
        viewrecords: true,
        autowidth: true,
        height: 300,
        caption: 'Supplier List',
        gridComplete: function () {
            test();
            var ids = grid.jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                //be = "<input style='width:60px;' type='button' value='Edit' onclick=\"gridRowButtonClick('" + cl + "', 'true');\" />";
                //se = "<input style='width:60px;' type='button' value='Delete' onclick=\"gridRowButtonClick('" + cl + "', 'false');\" />"; 
                be = "<input style='width:60px;' type='button' value='Edit' onclick=\"javascript:alert('Testing');\" />";
                se = "<input style='width:60px;' type='button' value='Delete' onclick=\"test();\" />";
                grid.jqGrid('setRowData', ids[i], { act: be + se });
            }
        }
        /*,gridRowButtonClick: function (id, isEdit) {
        alert("This is gridRowButtonClick.\n"+ id +" : "+ isEdit);
        }*/
    }).navGrid('#pager', { search: false, del: false, add: false, edit: false },
                        {}, // default settings for edit
                        {}, // default settings for add
                        {}, // delete instead that del:false we need this
                        {}, // search options
                        {} // view parameters
        );

    $('#butSearch').click(function () {
        grid.trigger("reloadGrid");
    });



});

According to upper JavaScript, gridComplete event fired and it show “**” message. But when I click delete button, firebug say “test is not defined”.

Any suggestion is appreciated.

Answer 1

You defined test function inside of jQuery(document).ready(function () {/*here*/}); event handler. You should move it outside to make it global. The function called from onclick have to be defined on the global level.

One more remark. Your current implementation of adding buttons is very slow. If you would try the code with some hundred or thousand rows you will see that vary clear. The problem is that setRowData modify elements on the page. The problem is that every change on the page follow to recalculation of positions of every existing elements on the page. At least reflow need be done. So it is much more effective to use custom formatter, cellattr and rowattr. You should additionally always use gridview: true option of jqGrid. In the way the full jqGrid body will be first prepared as text and then placed on the page as one operation (set HTML fragment in innetHTML property of the corresponding element). It improves performance of jqGrid in many many times.

For example you can define 'act' column as

{ name: 'act', index: 'act', width: 25, sortable: false,
    formatter: function (cellvalue, options, rowObject) {
        return "<input style='width:60px;' type='button' value='Edit' " +
            "onclick=\"javascript:alert('Testing');\" />" +
            "<input style='width:60px;' type='button' value='Delete' " +
            "onclick=\"test(" +  options.rowId + ");\" />";
    }}

and don’t forget to include gridview: true to the list of options which you use.