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 am adding a class ‘clickableTitle’ to the column and trying to access the current cell as:

$('.clickableTitle').live('click', function () {
    $(this).parents('table:first').getCell($(this).parents('tr:first').attr('id'), 'comment'));
 });

This gives me the anchor tag in below format, but I am not able to change its image source at runtime.

<A href="Proj.aspx?PID=795&Store=#Comment"><IMG class=commentIcon src="/_Layouts/images/iconCommentOn.png"></A>

Can you please let me know what would be the best way to achieve this. Thanks!!!

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>.