How to add a new column of buttons/images in jqgri

Question

I am using JQgrid in ASP.net MVC web application .

I was able to add a new columns of buttons named edit by using formatters

But, the problem is i was not able to get the value of a column in a row for which the button is clicked.

For example, if i click button edit ( new added) on 4th row, i would require to fetch the value of first column of that particular row.

i need this beacuse i want to redirect to another page with that value and do the edit there.

I was not able to fetch that value and add javascript to it.

Please help on this with any code samples..

Answer 1

Here's an simple example how you could add buttons dynamically to a jqgrid

http://jsfiddle.net/ShKDX/1/

Not sure if you first row is the id as specified in the fiddle, but you can modify it to use the correct data from the afterInsertRow function

var data = [
    {id: 1, text: 'row1'},
    {id: 2, text: 'row2'},
    {id: 3, text: 'row3'},
    {id: 4, text: 'row4'},
    {id: 5, text: 'row5'},
];
$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Id', 'Text', 'edit'],
    colModel: [
        { name: 'id', index: 'id', sorttype: "int" },
        { name: 'text', index: 'text' },
        { name: 'edit', index: 'edit', align: 'center', sortable: false, width: '40px' }
    ],
    caption: "Custom buttons",
    data: data,
    afterInsertRow: function(id, currentData, jsondata) {
        var button = "<a class='gridbutton' data-id='"+id+"' href='#'>edit</a>";
        $(this).setCell(id, "edit", button);
    },
    loadComplete: function(data) {
        $(".gridbutton").on('click', function(e) {
           e.preventDefault();
           alert('Edit id: ' + $(this).data("id"));
        });
    }
});

Answer 2

You don't need to bind click event handler to every button in the column. Every binding take memory and other resources of web browser. The most events bubbling to from inner to outer DOM element (see here), Mouse click, Keyboard keydown, Touch touchstart and other events on the button inside of grid will be bubble to the grid's <table> element. jqGrid register by default click event handler on the grid. It calls beforeSelectRow and onCellSelect callbacks and trigger jqGridBeforeSelectRow and jqGridCellSelect events from the event handler. So instead of binding your own click event handlers on every button it's enough to use one from listed above callbacks or events. beforeSelectRow (or jqGridBeforeSelectRow) will be used first. The callback is practical if you what that click on the button don't select the corresponding row. The answer for example shows how to verify whether the column which you needs are called. Another answer provides an example which will be very close to what you need. One more answer gives you another code fragment. To see more my old answers about the subject you can use the following query.

UPDATED: the demo http://jsfiddle.net/ShKDX/82/ is modification of the demo posted by Manuel van Rijn. It demonstrates what I mean.