0

I am using the jqGrid with inline editing option. I want to show an edit icon if the cell does not have any values.

So I write a formatter:

 function aFormatter(cellvalue, options, row) {
        if(cellvalue == null){          
              return 'you can edit this';
        }else{
            return cellvalue;
        }
 }

The you can edit this text is displayed, when I click on it an input box is displayed correctly, however the input box as the initial value you can edit this ?

How can I fix it?

I am using the jqGrid through struts 2 jquery tags plugin, which is build on jqGrid version

Alireza Fattahi
  • 42,517
  • 14
  • 123
  • 173

2 Answers2

2

I think that you should define unformatter (unformat) together with the formatter. For example,

formatter: function (cellvalue) {
   if (cellvalue == null) {          
      return "<span class='ui-icon ui-icon-pencil'></span>";
   } else {
      return cellvalue;
   };
},
unformat: function (cellValue, options, elem) {
    return $(elem).text();
}

I'm not sure how you can specify unformat in the struts2 grid plugin.

One more way would be defining formatter in the following way

(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.fn.fmatter, {
        yourFormatterName: function (cellValue, options) {
            if (cellvalue == null) {          
                return "<span class='ui-icon ui-icon-pencil'></span>";
            } else {
                return cellvalue;
            };
        }
    });

    $.extend($.fn.fmatter.yourFormatterName, {
        unformat: function (cellValue, options, elem) {
            return $(elem).text();
        }
    });
}(jQuery));

It will allows you to use formatter: "yourFormatterName" (or probably formatter = "yourFormatterName" in struts2) in the same way like you can use standard formatters "integer", "date" and other.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks, as you mentioned struts does not support unformatter and I used extend feature. but I get `$.fn.fmatter is undefined`. Can you please let me know how to fix it ?! – Alireza Fattahi Aug 13 '16 at 04:33
  • @AlirezaFattahi: You should include the code **after** jqGrid (after `jquery.jqgrid.min.js`). See [the line](https://github.com/free-jqgrid/jqGrid/blob/v4.7.0/js/jquery.fmatter.js#L50) of jqGrid code which defines `$.fn.fmatter`. – Oleg Aug 13 '16 at 09:04
  • you are correct but as I am using the jqGrid through struts plugin I could not find where I can put my code. I try to ask it in new question may be struts experts can help me. Thanks! – Alireza Fattahi Aug 13 '16 at 15:34
1

This will show an "edit" icon instead of "you can edit this" in the grid

function aFormatter(cellvalue, options, row) {
   if(cellvalue == null) {          
      return '<span class="ui-icon ui-icon-pencil"></span>'
   } else {
      return cellvalue;
   }
}
OmNiOwNeR
  • 54
  • 1
  • 5