0

In jqgrid for treegrid, when i click on the value displayed in a cell of expandColumn:'name' column to edit it, i am getting the html for the contents within the cell.

The html content i get is :-

<div class="tree-wrap tree-wrap-ltr" style="width: 54px;"><div style="left: 36px;" class="ui-icon ui-icon-radio-off tree-leaf treeclick"></div></div><span class="cell-wrapperleaf">Sub-subtask1</span>

Though my actual value is only :- Sub-subtask1

My grid set up is as below :-

jQuery("#tree").jqGrid({
        url:'json/jsonSamplePots.json',
        datatype: "json",
        mtype:'GET',
        colNames: ["id", "no.", "name", "col1", "col2", "col3", "col4", "col5", "col6", "col7", "col8", "col9", "col10", "col11", "col12", "col13", "col14", "col15", "col16"],
        colModel: [
            {name:'id',width: 30, editable:false, align:"right",sortable:false, hidden: true, key: true},
            {name:'no',width:80, editable:false, align:"left", sortable:true, sorttype:"int"},
            {name:'name', width:150, editable:true, sortable:true, sorttype:"text"},
            {name:'col1', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
            {name:'col2', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
            {name:'col3', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
            {name:'col4', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
            {name:'col5', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
            {name:'col6', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
            {name:'col7', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"int"},
            {name:'col8', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
            {name:'col9', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
            {name:'col10', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"int"},
            {name:'col11', width:120, editable:true, align:"left", sortable:true, sorttype:"text"},
            {name:'col12', width:80, editable:true, align:"left", sortable:true, sorttype:"text"},
            {name:'col13', width:80, editable:true, align:"right", sortable:true, hidden: true, sorttype:"text"},
            {name:'col14', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"text"},
            {name:'col15', width:300, editable:true, align:"left", sortable:true, sorttype:"int"},
            {name:'col16', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
        ],
        rowNum:10,
        rowList:[10,20,30],
        treeGridModel:'adjacency',
        treeGrid: true,
        cellEdit: true,
        ExpandColumn:'name',
        cellsubmit : 'clientArray',

});
rob mayoff
  • 375,296
  • 67
  • 796
  • 848
mayur
  • 47
  • 1
  • 3
  • 11

2 Answers2

1

You have to use inline editing instead of cell editing. You can't use TreeGrid together with cell editing or at least you can't use editing of the 'name' column which you declare in ExpandColumn.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • you are correct !! Though based on the client requirement, i went for cell editing with treegrid. Now As it was not working, I tried to attach the click event for the elements with "treeclick" class in "afterSaveCell" event. It works like this, for few cases, but again, sometimes its not. Here, the main problem is not the html contents in the input text box, but after i edit the cell, the click event do not work for "plus" image. – mayur Apr 02 '12 at 12:57
  • It's what I wrote. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/LocalAdjacencyTree11_.htm) from [the answer](http://stackoverflow.com/a/9482049/315935) for example. The cell editing works just incorrect with the column from 'ExpandColumn' column. – Oleg Apr 02 '12 at 13:02
  • Thanks for the links !! So, is it the limitations of jqgrid or a bug ?? Can't it be resolved by attaching the click event properly again to those image.. !! – mayur Apr 02 '12 at 13:24
  • @mayur: I don't think that the problem with cell editing can be solved in very easy way. I am sure, that one can modify the code of cell editing so that it will work with tree grid correctly, but it's not simple. So it's not so important is it the bug or limitation. You can't use cell editing if you need to edit 'name' column. I personally never use cell editing in my productive projects. I prefer to use either inline editing or sometimes form editing. – Oleg Apr 02 '12 at 13:33
  • Thanks for the info.. !! Now, thinking to move to inline edit.. Anywayz.. Thanks again for your responses .. !! – mayur Apr 02 '12 at 14:14
0

It sounds like you're using getRowData to get the cell's value. If the cell is in edit mode, then getRowData will return the HTML of the cell, not the actual value. You have to call getRowData prior to putting the cell into edit-mode.

You may want to try using the beforeSelectRow event to cache the row's data before it gets rendered into edit mode.

Walter Stabosz
  • 7,447
  • 5
  • 43
  • 75
  • i am not using any explicit function to get cell's value. When cell edit is true, if we click on the cell its value will be displayed. So, for me this value is coming as html content of cell, when cell is in edit mode. One more thing, this happens only for the cell in the column name, which is my expand column. – mayur Feb 21 '12 at 05:30
  • Hmm, well I've exhausted my range of jqGrid knowledge. I haven't done too much with the treegrid. It may help you get an answer if you set up your grid in jsfiddle for others to collaborate with http://www.javascripthtmlcss.com/javascript/put-your-code-in-a-test-tube-and-collaborate/ . – Walter Stabosz Feb 27 '12 at 14:35
  • @Oleg : please help in this issue... !! – mayur Apr 02 '12 at 12:16