Qualliarys Qualliarys - 5 months ago 123
jQuery Question

jqgrid : how to change the class of one cell (when mouse is over on)?

I set cells of the first column of my grid, with a class as follows:

$("#myGrid").jqGrid('setCell',rowid,'column_1', '', '**ui-state-default**');


How can I change the class of a cell when the mouse is over it?

Answer

Here is my last solution. I will use it as follows:

$("#mygrid tr").hover(
  function(){
      $(this).find("td").eq(1).removeClass('ui-state-default');
      $(this).addClass("ui-state-hover");
  },
  function(){
     if(!$(this).hasClass("ui-state-active"))
     $(this).find("td").eq(1).addClass('ui-state-default');
  }
);

$("#mygrid tr").click(function(){
  $("#mygrid tr").each(function() {
    $(this).find("td").eq(1).addClass('ui-state-default');
  });

  $(".ui-state-active").removeClass("ui-state-active");
  $(".ui-state-highlight").removeClass("ui-state-highlight");
  $(this).find("td").eq(1).removeClass('ui-state-default');
  $(this).addClass("ui-state-active");
});

It works well also for a grid within input text tags!