Question

I am trying to use jqgrid inline edit function. But I got the whole html tags when inline editor is triggered.

What could be the reason? Thanks.

Here is the jqgrid code:

$(document).ready(function () {

'use strict';
var grid;

grid = jQuery("#list2");
grid.jqGrid({

    editurl: "clientArray",
    datastr: topicjson,
    datatype: "jsonstring",
    height: "auto",
    loadui: "disable",
    colNames: [/*"id",*/"Items","nick","url"],
    colModel: [
    //{name: "id",width:1, hidden:true, key:true},
    {name: "elementName", width:250, resizable: false, editable: true},
    {name: "nick", width:250, resizable: false, editable: true},
    {name: "url",width:1,hidden:true}
    ],
    treeGrid: true,
    treeGridModel: "adjacency",
    caption: "jqGrid Demos",
    ExpandColumn: "elementName",
    //autowidth: true,
    rowNum: 100,
    //ExpandColClick: true,
    treeIcons: {leaf:'ui-icon-document-b'},
    jsonReader: {
    repeatitems: false,
    root: "response"
    },
    cellEdit: true,
    cellSubmit: "clientArray",
    onSelectRow: function(id){
    if(id && id!==lastSel){ 
    jQuery('#list2').restoreRow(lastSel); 
    lastSel=id; 
    }
    jQuery('#list2').editRow(id, true); 
    }   

});

});

Answer 1

It turns out you can use formatCell event to change cell content before editing. The return value is the content you want. For this particular case, the treeGrid has small image with all html tags in the cell. When you edit the cell, by default everything is displayed as a cell content. To fix it, you can do this:

  formatCell: function(rowid,cellname,value,iRow,iCol) {
    return whatever_you_want_to_be;
  }