Katzumi Katzumi - 5 months ago 54
Javascript Question

JQGrid Formatter generating incorrect code after in-line edit

My "Formatter" is generating incorrect code after performing an in-line edit on that row. After I save my in-line edit and attempt to click on the "Edit: ##" of that row, I get an 404.

1) When the page first loads (or reloads) you can see the correct URL & html code for the link are there:
correct URL & html code for the link are there

2) Now I perform an in-line edit and click on the SAVE JqGrid Actions icon:
perform an in-line edit and click on the SAVE

3) ERROR--> The EDIT link now seems to contain the same HTML code twice:
HTML code is duplicated

My grid's colModel:

colModel: [

{"width":"50","fixed":true,"search":true,"editable":false,"searchoptions":{"clearSearch":false,"sopt":["eq","ne","lt","le","gt","ge","nu","nn"]},"sortable":true,"formatter":fullEditTemplate,"name":"id","label":"ID"},

{"formatter":"actions","formatoptions":{"afterSave":easygrid.afterSave('templateGrid_table'),"onError":easygrid.onError('templateGrid_table'),"keys":true,"delbutton":false},"searchoptions":{"clearSearch":false},"search":false,"name":"actions","width":"50","sortable":false,"resizable":false,"label":"Edit","fixed":true,"editable":false},

{"formatter":templateDuplicateFormat,"label":"Duplicate","searchoptions":{"clearSearch":false},"search":false,"editable":false,"name":"version","sortable":true,"width":"70"},

{"searchoptions":{"clearSearch":false,"sopt":["cn","nc","eq","ne","bw","ew","nu","nn"]},"editable":true,"sortable":true,"width":"250","name":"templateName","search":true,"label":"Template Name"}


],


This is the fullEditTemplate function:

function fullEditTemplate(cellvalue, options, rowObject) {
return "<a href='${g.createLink(controller: "template", action: "edit")}/" + cellvalue + "'> Edit: " + options.rowId + "</a> ";
}


THANKS!!

Answer

The reason for this is because you have not specified unformmater which corresponds to fullEditTemplate. Formatters work well with out unformatters as long as the grid is read only but if we need to inline or form edit unexpected behavior like what you have happens.

From the Documentation here is how you should fix it

First add unformatter to the colModel

 {"width":"50","fixed":true,"search":true,"editable":false,"searchoptions":{"clearSearch":false,"sopt":["eq","ne","lt","le","gt","ge","nu","nn"]},"sortable":true, "unformat":fullEditTemplateUnformat,"formatter":fullEditTemplate,"name":"id","label":"ID"},

the define the function as follows.

function fullEditTemplateUnformat( cellvalue, options, cell){
    var anchortext= $('a', cell).text();
    var resultValue=anchortext.split(":"); // resultValue[0] is the Edit and  resultValue[1] is what we are looking for
    return resultValue[1].trim();
}