Can I update an image in jqgrid cell

Question

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.

You can set `src` attribute only for example. Could you post your *current code* of `onCellSelect` callback and I will modify it to work without usage of `setRowData`? Do you want that the image will be changed if the user click on the old image or if the user click somewhere inside of the cell, which holds `img`, but with another `src` in ``? — Oleg, May 24 '17 at 19:28

score 1 · Accepted Answer · answered May 25 '17 at 09:45

1

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"
            //});
        }
    }
}

answered May 25 '17 at 09:45

Oleg

220,925
34
403
798

thank you sir :) I used target.onclick event to define click event on the new image but now every time it is running the same code of onCellSelect again and again – shv22 May 25 '17 at 10:34
@shv22: You are welcome! If you want that I help you that you should always provide the demo (in JSFiddle), which reproduces the problem. I could immediately see the problem, debug it and to post you modified demo, which fixes the problem. If you just *describe* the problem that I can only guess, what you do. For example, do you use `return false;` in the `onclick`? You can call `event.preventDefault()`. You can use `beforeSelectRow` instead of `onCellSelect`, ... I can only guess what you do exactly and what is the reason of the problem. – Oleg May 25 '17 at 10:39
sir I have made the demo here http://jsfiddle.net/adishri22/vwb1c0mk/196/. My problem is if I define the target.onclick event it is getting called even when the image is changed. It should only be called after when the user clicks on the new image. – shv22 May 25 '17 at 11:42
@shv22: Sorry, but I don't understand the goal of setting `onclick`. You have currently full control over onclick: the `onCellSelect` will be executed exactly in the case. Why you can't place all code from `oneAlert` or `anotherAlert` directly inside of `onCellSelect`? – Oleg May 25 '17 at 11:47
the first image shows data is available now if user clicks on image we check whether we can fetch data from server or not. On the basis of this we will change the image and title. Now, user clicks again to download the data. So, it can't run on first time. User needs to click again thats why I need another onclick event so that I could be able to fetch the report – shv22 May 25 '17 at 11:52
@shv22: Sorry, but I can't follow you. For example, I don't understand the meaning of `i`. The function `imageChange(data)` set `i` always to `1` and `} else {` part of `if (i==1) {` will **never** executed. Moreover, I think that you still not full understand that `onCellSelect` will be executed **inside of `click` handler**. Why you could need set one more `onclick` handler which do anything. You can do *the same* directly inside of your code of `onCellSelect`. – Oleg May 25 '17 at 12:01
@shv22: The code of `onCellSelect` contains already `if (cmName === "Image" && target.tagName.toUpperCase() === "IMG") {...}` you can add the test for `target.src === "http://netdna.webdesignerdepot.com/uploads6/creative-app-icons/02-app.jpg"` for example and do some actions depend on the current value of `src`. – Oleg May 25 '17 at 12:03
the i is just to resemble a condition as I said first click on image change the image will send back request to server. But I got your point thank you again :) – shv22 May 25 '17 at 12:28
@shv22: You are welcome! I wrote about `i` just because I could see during debugging that `else` part of `if (i==1) {` will be never executed. In any way, I'm glad if I could help you. – Oleg May 25 '17 at 12:30
you always help me :) – shv22 May 25 '17 at 12:46
Can I do this with `onSelectRow` event too? – AaA Nov 02 '17 at 08:19
@AaA: Yes you can. The 3-d parameter of `onSelectRow` is the event object, which `target` property gives you direct access to the clicked DOM element. If you would have implementation problem then you could post new question where you describe the problem in detailed. The demo (in JSFiddle, for example) is good of cause. I could modify the demo and show you how to solve the problem. – Oleg Nov 02 '17 at 08:30

Can I update an image in jqgrid cell

1 Answers1

Linked