how to add editbutton to jqgrid?

Question

I am using the basicsgrid example from here: http://tpeczek.codeplex.com/releases/view/61796

Trying to add an editbutton for each row so I can open my edit page but does not work? what am I missing?

I added this at the end of the grid definition:

editurl: '/Home/Edit'

the grid:

<script type="text/javascript">
$(document).ready(function () {
    $('#jqgProducts').jqGrid({
        //url from wich data should be requested
        url: '@Url.Action("Products")',
        //type of data
        datatype: 'json',
        //url access method type
        mtype: 'POST',
        //columns names
        colNames: ['Actions', 'ProductID', 'ProductName', 'SupplierID', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock'],
        //columns model
        colModel: [
            { name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions' },
                    { name: 'ProductID', index: 'ProductID', align: 'left' },
                    { name: 'ProductName', index: 'ProductName', align: 'left' },
                    { name: 'SupplierID', index: 'SupplierID', align: 'left' },
                    { name: 'CategoryID', index: 'CategoryID', align: 'left' },
                    { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left' },
                    { name: 'UnitPrice', index: 'UnitPrice', align: 'left' },
                    { name: 'UnitsInStock', index: 'UnitsInStock', align: 'left' }
                  ],
        //pager for grid
        pager: $('#jqgpProducts'),
        //number of rows per page
        rowNum: 10,
        //initial sorting column
        sortname: 'ProductID',
        //initial sorting direction
        sortorder: 'asc',
        //we want to display total records count
        viewrecords: true,
        //grid height
        height: '100%',
        editurl: '@Url.Action("Edit")'
    });
});

doo u want to add custom button to each row or by default there can edit button also, do u want to use that? — Piyush Sardana, Jul 31 '12 at 02:48
@PiyushSardana Just the standard edit button easy and simple thnks — user603007, Jul 31 '12 at 03:00

score 1 · Answer 1 · edited May 23 '17 at 10:24

if you want the default edit and delete button then you can go with action formatter.

Just add one more column to your grid with colName

colNames:['Actions', ... ] something like this and colModal

{
  name:'act', index:'act', width:55, align:'center', sortable: false,
  formatter: 'actions'
}

sth like this now here only you can specify your edit and delete options

like this

{
  name: 'act', index: 'act', width: 75, align: 'center', sortable: false,
  formatter: 'actions',
  formatoptions: {
    keys: true, restoreAfterError: false, onError: callyourErrorFunction,
    afterSave://if you wanto reload ur grid here, reload it,
    onEdit: function (id) {
      if (typeof (lastSel) !== "undefined" && id !== lastSel) {
        var grid=$("#grid");
        cancelEditing(grid);
      }
      lastSel = id;
    },
    editOptions: {
      url: '@Url.Action("EditAction")',
      restoreAfterError: false
    },
    delOptions: {
      url: '@Url.Action("DeleteAction")'
    }
  }
}

check this answer: jqgrid EditActionIconsColumn Events

and if you want custom button then you can do sth like this

loadComplete: function () {
    var iCol = getColumnIndexByName(grid, 'act');
    $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
        .each(function() {
            $("<div>", {
                title: "Custom",
                mouseover: function() {
                    $(this).addClass('ui-state-hover');
                },
                mouseout: function() {
                    $(this).removeClass('ui-state-hover');
                },
                click: function(e) {
                    alert("'Custom' button is clicked in the rowis="+
                        $(e.target).closest("tr.jqgrow").attr("id") +" !");
                }
            }
          ).css({"margin-right": "5px", float: "left", cursor: "pointer"})
           .addClass("ui-pg-div ui-inline-custom")
           .append('<span class="ui-icon ui-icon-document"></span>')
           .prependTo($(this).children("div"));
    });
}

this will be applied along with action formatter. if you dont need edit and delete button there, just make editbutton and delbutton as false in formatoptions.

I updated the grid definition but it still wont redirect to the Edit action? — user603007, Jul 31 '12 at 05:57
budyy u need to specify edit options, wait let me give u some code — Piyush Sardana, Jul 31 '12 at 06:08
well this works for me...and i thought the other(BobSort) answer is working for you..so mark it as answer — Piyush Sardana, Jul 31 '12 at 15:35

score 1 · Accepted Answer · answered Jul 31 '12 at 03:05

I used a formatter function to add buttons that lead you to other page. here is how I did it

function PKId_formatter(cellvalue, options, rowObject) {
    return '<a href="yourEditUrl?id=' + cellvalue + '"><img src="pencil.png" border=0 /></a>';
}

then add formatter: PKId_formatter to your column definition

colModel : [
    ...
    { name: '...', index: '...', formatter: PKId_formatter , ...},
    ...
]

Just a Note: PKId_formatter is the function name that you are using to format content of your button column and you can use any name you like

here is a reference to the wiki document: Custom Formatter

how to add editbutton to jqgrid?

2 Answers2