CODEWITHSUNDEEP
javascriptjqueryjqgrid
shv22
shv22

Reputation: 690

Can I update an image in jqgrid cell

Hi I have gone through various link to update a cell value like here also here

I need to change the image which I put through a custom formatter as soon as user clicks on the image. So, I was using onCellSelect event where I am getting the data of the row by this

var data = $(this).jqGrid('getRowData', row);

And then I am changing the value of the cell by this -

image = "results_not_available.png";
data.colyesno = "<img title ='Detail data not available' src='img/" + image + "' />";

and the updating the cell value by setRowData

$(this).jqGrid('setRowData', row, data);

All the other links show this is a workable solution. I even tried to change any string column that too it is not working for me.

What else can I do?

Update: For me, setRowData is setting the title for the cell, not the value.

1) How I am adding an image -

I am using a custom formatter for that-

function  resultsImage(cellValue, options, rowdata, action) {
        var image = "";
        if (cellValue == "Y"){
            image = "results_available.png";
            var imageHtml = "<img class=pointer title ='Detail data available. Click to request for data' src='img/" + image + "' />";
            return imageHtml;
        }       
        else if (cellValue == "N"){
            image = "results_not_available.png";
            var imageHtml = "<img title ='Detail data not available' src='img/" + image + "' />";
            return imageHtml;
        }

    }

So, here inside the cell, I am placing an image.

On cell select, I am taking the data and calling a function -

    onCellSelect: function(row, col, content, event) {
      var cm = jQuery(grid).jqGrid("getGridParam", "colModel");
      columnName = cm[col].name;
      var data = $(this).jqGrid('getRowData', row);
      if(columnName == 'col_image')
         callImage(data,content);
      $(this).jqGrid('setRowData', row, data); 
}

Now here I am checking some condition so to which image needs to be applied.

var callImage = function (data,content){
    if(condition==true) {    ///which is some variable where we make some request to server and it returns backs a variable
      image = "loading_completed.png";
      data.col_image = "<img title ='Click to view data' src='img/" + image + "' />";
      return data
      };
    else {
      image = "loading_error.png";
      data.col_image = "<img title ='No data available' src='img/" + image + "' />";
      return data
      };
    }

So, if the user clicks on an image not in the cell then the image src should change according to the condition and it change should reflect in the same place as the old image.

Upvotes: 0

Views: 821

Answers (1)

Oleg
Oleg

Reputation: 221997

You can use event parameter of onCellSelect callback. event.target will be element, clicked by user. Below is the example of the code:

onCellSelect: function (iRow, iCol, content, event) {
    var cmName = $(this).jqGrid("getGridParam", "colModel")[iCol].name,
        target = event.target;

    if (cmName === "col_image" && target.tagName.toUpperCase() === "IMG") {
        if (condition) { // some kind of testing
            target.src = "img/loading_completed.png";
            target.title = "Click to view data";
            // one can use $(target).attr alternatively
            //$(target).attr({
            //    src: "img/loading_completed.png",
            //    title: "Click to view data"
            //});
        } else {
            target.src = "img/loading_error.png";
            target.title = "No data available";
            // one can use $(target).attr alternatively
            //$(target).attr({
            //    src: "img/loading_error.png",
            //    title: "No data available"
            //});
        }
    }
}

Upvotes: 1

Related Questions