Change cell properties in JQGrid

Question

I am new to JQ grid. In my JQ grid, I have an image in a column added as an anchor tag. Onclick of a specific cell I need to change the image for this cell only. I add the click class clickTitle to the column and try 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 an anchor tag in the lower format, but I cannot change its image source at runtime.

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

Could you tell me what would be the best way to achieve this. Thanks!!!

Answer 1

First of all, the name of the JavaScript library you are trying to use is: jqGrid . Throughout the documentation or on the main side, you will find the same name written in the same form.

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

Demo demonstrates how you can use it.

I used jQuery UI as the original background image to 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 easily change the code if you prefer to have <img> instead of the background image in <span> .

Answer 2

@Oleg: Thanks for your input. I'm sure urs is the right way, but I had to use the solution mentioned below due to limitations of the 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'); });