jqgrid - json - getting wrong value

Question

I have the following JSON:

{
    "wrapper": {
        "table": {
            "rows": [
                {
                    "cells": [
                        {
                            "fname": "Jack",
                            "label": "fname",
                            "editable": false
                        },
                        {
                            "lname": "Kalra",
                            "label": "lname",
                            "editable": true,
                            "details": [
                                {
                                    "industry": "music"
                                },
                                {
                                    "industry": "media"
                                }
                            ]
                        }
                    ]
                },
                {
                    "cells": [
                        {
                            "fname": "Steven",
                            "editable": true,
                            "label": "fname"
                        },
                        {
                            "lname": "Martini",
                            "editable": true,
                            "label": "lname"
                        }
                    ]
                },
                {
                    "cells": [
                        {
                            "fname": "Andrea",
                            "editable": true,
                            "label": "fname"
                        },
                        {
                            "lname": "Dmello",
                            "editable": true,
                            "label": "lname",
                            "details": [
                                {
                                    "industry": "finance"
                                },
                                {
                                    "industry": "HR"
                                },
                                {
                                    "industry": "media"
                                }
                            ]
                        }
                    ]
                },
                {
                    "cells": [
                        {
                            "fname": "James",
                            "label": "fname",
                            "editable": false
                        },
                        {
                            "label": "lname",
                            "lname": "Diamond",
                            "editable": true,
                            "details": [
                                {
                                    "industry": "music"
                                },
                                {
                                    "industry": "media"
                                }
                            ]
                        }
                    ]
                },
                {
                    "cells": [
                        {
                            "fname": "Aba",
                            "label": "fname",
                            "editable": true
                        },
                        {
                            "label": "lanme",
                            "lname": "Duck",
                            "editable": true,
                            "details": [
                                {
                                    "industry": "finance"
                                },
                                {
                                    "industry": "technology"
                                },
                                {
                                    "industry": "media"
                                }
                            ]
                        }
                    ]
                },
                {
                    "cells": [
                        {
                            "fname": "Henry",
                            "label": "fname",
                            "editable": true
                        },
                        {
                            "label": "lname",
                            "lname": "Hebert",
                            "editable": true,
                            "details": [
                                {
                                    "industry": "finance"
                                },
                                {
                                    "industry": "HR"
                                },
                                {
                                    "industry": "media"
                                },
                                {
                                    "industry": "IT"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    }
}

All cells are editable.

I'm trying to loop through each row and then each cell to find out the number of properties in "details". In inline editing mode, it should be a text field and the value of text field should be the corresponding number of properties.

Example - for Marc Kalra, the details cell will be a text field with a value of 2.

Here's my code

loadComplete: function(data){
   var x, y, cellProp;
   for (x = 0; x < data.wrapper.table.rows.length; x++) {
      var cellCount = data.wrapper.table.rows[x].cells.length;      
      for (y = 0; y < cellCount; y += 1) {
           cellProp = data.wrapper.table.rows[x].cells[y];             
           var prop, listCount, cellLabel;
           listCount = data.wrapper.table.rows[x].cells[y].details.length;
           cellLabel = data.wrapper.table.rows[x].cells[y].label;
           function gridCustomEdit (value, options){                                                                                    
        var el = document.createElement("input");
        el.type="text";
        el.value = listCount;
        return el;
        }       
        for (prop in cellProp) {                                                    if (prop === "details"){
                                    $("#jqgrid").setColProp(cellLabel, {
        editable: true,
        edittype: "custom",
                                        editoptions: {
                                            custom_element: gridCustomEdit                                  
                                        }
                                    });
                                }
                            }                       
                        }
}

PROBLEM - is that el.value = listCount; in the above code always returns 4 as the number of properties for each row/cell.

Can someone point me my mistake?

UPDATED

loadComplete: function(data){
   var x, y, cellProp;
   for (x = 0; x < data.wrapper.table.rows.length; x++) {
      var cellCount = data.wrapper.table.rows[x].cells.length;      
      for (y = 0; y < cellCount; y += 1) {
           cellProp = data.wrapper.table.rows[x].cells[y];  
           var isEditable = cellProp.editable;
           if (isEditable === false) {
                $("#jqgrid").setColProp(cellProp.label, {
                    editable: false
                });
           }else {           
              var listCount, cellLabel;
              listCount = data.wrapper.table.rows[x].cells[y].details.length;
              cellLabel = data.form.summary.rows[x].cells[y].label;
              $("#jqgrid").setColProp(cellLabel, {
                   editable: true,
                   editoptions: {
                       dataInit: function(elem){
                          $(elem).myPlugin({listCount: listCount})
                       }
                   }
              })                              
           }                                        
       }                       
   }
}

PLUGIN CODE

(function( $ ){     
    $.fn.extend({   
        myPlugin: function(options){
            var defaults = {
               listCount: 0
            };
            var options = $.extend(defaults, options);
            var o = options;
            alert(o.listCount);

           if (o.listCount === 3){
              $(elem).html("<input type='text' value='" + o.listCount + "'>")
           } else {
              $(elem).html("<select>") **// this should be a dropdown with values = properties of `details`** 
           }
        }
    })
})

GRID CODE

$("#jqgrid").jqGrid({
    datatype: "json",
    colNames:['fname','lname'],
    colModel:[
      {name:'fname',index:'fname'},
      {name:'lname',index:'lname'},
    ],
    jsonReader: {
       root: "wrapper.table.rows",
       repeatitems: false
    },
    onSelectRow: function(id){
       $(this).jqGrid('editRow',id);
    },
})

If details exist + number of properties in details = 3, then lname is displayed as a text field in inline editing mode.

If details exist + number of properties in details > 3, then lname is displayed as a select field in inline editing mode.

Answer 1

The method setColProp set property for the column and not for the cell in the column. So if you set in the loop setColProp for the same column many times only the last setting will be applied. Because the last row (for "Love Hebert") in your data has 4 items in the details array only the value will be used.

The next error is that you define gridCustomEdit function which has reference to external variable listCount. In the case there are only one instance of the function with the last value of the variable. If you need to have many function instances with different values you should use closure.

In your case it seems to me you can implement all what you need even without the usage of closure and without custom editing (edittype:'custom' with custom_element and custom_value).

I suppose that all what you need to do is to set setColProp inside of onSelectRow (or before the call of editRow) and not inside of loadComplete. See the answer for more information. If you need to change the edittype of the column you can do this in the same way. So you can for example dynamically set edittype: "text" and set editoptions with dataInit which change the value of the element.

If it is needed you can even dynamically switch the edittype between edittype: "text" and edittype: "select" and set all editoptions which are required.

In the way you will receive simple and flexible code which don't use custom editing at all.