jqgrid custom formatter: The custom formatter always returns the last row of the grid. Why?

Question

Updated I have problems to point data with the custom formatter.

I am using jqgrid's custom formatter.

  function myformatter ( cellvalue, options, rowObject )
  {
   ....

Now, my custom formatter seems to point always on the last row of the grid. In fact, if I get rowObject[0], for example, I have the value of the [column 0, last row] of my grid. Why?

The grid's data is correctly compiled and I already checked Json object content.

Here's my custom formatter:

         ......
         { name: 'act', index: 'Detail', width: 50, sortable: false, search: false,
              formatter: function (cellvalue, options, rowObject) {
                  i = options.rowId;

                  var tst = '<a class="nau" name="nau" onClick="alert(i);return false;" href="#"></a>';
                  var det = '<a class="det" name="det" onClick="alert(this.name);return false;" href="#"></a>';
                  return tst + det;
              }
          }
         ....

Update

I noticed that the formatter works fine if I return the string I want directly (for example return rowObject[0] works fine), while I have problems when I use variables. Moreover, if I try to do onclick=alert(rowObject[0]) I get an exception saying rowObject does not exists. I think this is the problem: if I set t = rowObject[0], then the formatter use t as static variable instead of updating it for each row. The same if I set i = options.rowId, where i remains static...WHY? What I should do?

Solution 1

I succeed to get it work...I must say that I feel a little embarrassed ... it was a stupid mistake. I hope we can still help some inexperienced like me, anyway. I did not put variables outside of quotes:

      ......
     { name: 'act', index: 'Detail', width: 50, sortable: false, search: false,
          formatter: function (cellvalue, options, rowObject) {
              i = options.rowId;

              var tst = '<a class="nau" name="nau" onClick="alert('+i+');return false;" href="#"></a>';
              var det = '<a class="det" name="det" onClick="alert(this.name);return false;" href="#"></a>';
              return tst + det;
          }
      }
     ....

I quote the precious help from @Oleg: "The code in onclick will be executed separately so you have to use values of the variables and not the names. For example 'onclick="alert(rowObject[0]);return false;"' will produce error because global array rowObject is not exist. You have to change the code to use 'onclick="alert(' + rowObject[0] + ');return false;"' which will place the value of rowObject[0] in the code."

Solution 2

I suppose that you have some problems in filling of the grid. If options.rowId is the same for all rows then you fill the grid with the wrong data where the id is always 1.

If you will don't localize the wrong place in your code you should include the code and the test data which you use.

Moreover you should use onclick instead of onClick. Your current code can work now, but it will be not more work it your would change the DOCTYPE.