Edit cell properties in JQGrid

Question

I am a beginner in JQ grid. In my JQ grid I have a image in a column added as an anchor tag. Onclick of the particular cell I need to change the image only for that cell. I

Answer 1

First of all the name of the JavaScript library which you try to use: jqGrid. Everywhere in the documentation or on the main side you will find the same name written in exact the same form.

To your main question. It seems you can just use onCellSelect callback to catch the click event on the image or just a click on some cell. The e parameter of the onCellSelect callback is the event object and the e.target will the the element which was clicked.

The demo demonstrate how you can use it.

I used as the initial background image of jQuery UI for the lock.

formatter: function () {
    return "<a href='#'><span class='ui-icon ui-icon-locked'></span></a>"
}

Clicking on the image changed the image by changing the class on the <span> element from "ui-icon-locked" to "ui-icon-unlocked":

onCellSelect: function (rowid, iCol, cellcontent, e) {
    var $dest = $(e.target), $td = $dest.closest('td');
    if ($td.hasClass("clickableTitle")) {
        if ($dest.hasClass("ui-icon-locked")) {
            $dest.removeClass("ui-icon-locked").addClass("ui-icon-unlocked");
        } else {
            $dest.removeClass("ui-icon-unlocked").addClass("ui-icon-locked");
        }
    }
}

You can easy change the code if you prefer to have <img> instead of background image in <span>.

Answer 2

@Oleg: Thanks for your input. I am sure that urs is the right way to go about it, but I had to use the solution mentioned below because of the limitations of existing implementation.

$('.clickableTitle').live('click', function () { 
    $('body').css('cursor', 'wait'); 
    var commentIconStat = $(this).parents('table:first').getCell($(this).parents('tr:first').attr('id'), 'comment');  
    //Turn read comment off 
    if (commentIconStat.search(/iconCommentOn/i) > -1) { 
        commentIconStat = commentIconStat.replace(/iconCommentOn/i, "iconCommentOff"); 
        $(this).parents('table:first').setCell($(this).parents('tr:first').attr('id'), 'comment', commentIconStat, '')

    } 
    $('body').css('cursor', 'default'); 
});