Cannot change value of a row in Jqgrid

Question

I will like the image/icon in a row to change from red to green when I select a row and click on a button. However it does nothing. You can find it on the following jsfiddle: http://fiddle.jshell.net/njiterry/p9n8qq0x/9/

See my javascript code below:

var mydata = [{
    Sel: false,
    Country: "Germany",
    Capital: "Berlin",
    Date: "05-09-2014"
}, {
    Sel: false,
    Country: "France",
    Capital: "Paris",
    Date: "05-09-2014"
}, {
    Sel: false,
    Country: "Cameroon",
    Capital: "Yaounde",
    Date: "06-09-2014"
}, {
    Sel: false,
    Country: "Gabon",
    Capital: "Libreville",
    Date: "06-09-2014"
}, {
    Sel: false,
    Country: "Holland",
    Capital: "Amsterdam",
    Date: "07-09-2014"
}, {
    Sel: false,
    Country: "Japan",
    Capital: "Tokyo",
    Date: "08-09-2014"
}, {
    Sel: false,
    Country: "Italy",
    Capital: "Rome",
    Date: "09-09-2014"
}, {
    Sel: false,
    Country: "Spain",
    Capital: "Madrid",
    Date: "09-09-2014"
}, {
    Sel: false,
    Country: "England",
    Capital: "London",
    Date: "10-09-2014"
}, {
    Sel: false,
    Country: "US",
    Capital: "Washington D.C.",
    Date: "12-09-2014"
}],
    grid = jQuery("#pays_grid"),
    initDateWithButton = function (elem) {
        if (/^\d+%$/.test(elem.style.width)) {
            // remove % from the searching toolbar
            //elem.style.width = '';
            $(elem).css({
                width: "230px"
            });
        }
        // to be able to use 'showOn' option of datepicker in advance searching dialog
        // or in the editing we have to use setTimeout
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-mm-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,
                buttonImageOnly: true,
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                buttonText: "Select date",
                onSelect: function (dateText, inst) {
                    if (inst.id.substr(0, 3) === "gs_") {
                        grid[0].triggerToolbar();
                    } else {
                        // to refresh the filter
                        $(inst).trigger("change");
                    }
                }
            });
        }, 100);
    };

grid.jqGrid({ //set your grid id
    data: mydata, //insert data from the data object we created above
    datatype: 'local',
    height: '250',
    gridview: true,
    width: 600,
    autoheight: true,
    rowNum: 10,
    rowList: [1, 5, 10],
    colNames: ['Sel.', 'Country', 'Developed', 'Capital', 'Date'],
    onCellSelect: function(rowid, index, contents, event) 
    {   
       var cm = grid.jqGrid('getGridParam','colModel');                          
       if(cm[index].name == "Developed")
       {
            var img= $('tr#'+rowid).find('td:nth-child(3) > img')
            if(img.attr('alt')=='red light')
            {                img.attr({'src':'http://www.iconsdb.com/icons/preview/green/circle-xxl.png','alt':'green light' });
            }
           else
           {
img.attr({'src':'http://www.iconsdb.com/icons/preview/red/circle-xxl.png','alt':'red light' });            
           }
       }
    },

    //define column names
    colModel: [{
        name: 'Sel',
        align: 'center',
        sortable: false,
        width: 10,
        search: false,
        editable: true,
        edittype: 'checkbox',
        editoptions: {
            value: "True:False"
        },
        formatter: "checkbox",
        formatoptions: {
            disabled: false
        }
    }, {
        name: 'Country',
        index: 'Country',
        key: true,
        width: 20,
        align: 'center'
    }, {
        name: 'Developed',
        align: 'center',
        width: 65,
        fixed: true,
        formatter: function () {
            return "<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:15px;height:15px'/>";
        }
    }, {
        name: 'Capital',
        index: 'Capital',
        width: 20,
        align: 'center'
    }, {
        name: 'Date',
        index: 'Date',
        align: 'center',
        width: 55,
        sorttype: 'date',
        editable: true,
        editoptions: {
            dataInit: initDateWithButton,
            size: 11
        },
        searchoptions: {
            sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
            dataInit: initDateWithButton
        }
    }], //define column models
    pager: '#pays_grid_pager', //set your pager div id
    viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
    sortorder: "asc", //sort order; optional
    sortname: 'Country',
    shrinkToFit: true,
    forceFit: true,
    caption: "Country Overview"
}).navGrid('#pays_grid_pager', {
    edit: false,
    add: false,
    del: false,
    search: false,
    refresh: true
}).navButtonAdd('#pays_grid_pager', {
    caption: "Set Developed",
    buttonicon: "ui-icon-circle-check",
    position: "first",
    title: "Set Developed",
    onClickRow: function (rowId, iRow, iCol, e) {
        alert("yes");
    },
    onClickButton: function () {
        alert(1);
        var data = grid.getRowData();
        for (var i = 0; i < data.length; i++) {
            if (data[i].sel === 'True') {
                data[i].Developed = "<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>";
                data[i].sel = 'False'
                grid.jqGrid('setRowData', i, data[i]);
                grid.jqGrid('saveRow', i, false);
            }
        }
    }

What I will like to have is the following: when I select a row(by clicking on an edit box) and click on the "Set Developed" button, the icon on the selected row should change from red to green

Answer 1

The two problems is you have to rename the data[i].sel to data[i].Sel

and the value of the image is changed but the view is not so you have to do it in value and the view i think the following code solved the problem http://jsfiddle.net/p9n8qq0x/14/

 for (var i = 0; i < data.length; i++) {
        console.log(data[i]);
        if (data[i].Sel === 'True') {
          var image="<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>";
            data[i].Developed = image;
            $('#'+data[i].Country+' [aria-describedby="pays_grid_Developed"]').html(image);               
            data[i].Sel = 'False';
            grid.jqGrid('setRowData', i, data[i]);
            grid.jqGrid('saveRow', i, false);
        }
    }