jQuery Grid Plugin - jqGrid

Hi,

     I have a jq grid,in that one column is a dropdown cloumn where we can select some thing and just click on enter it will update only two options available one is true and another is false

If user selects false form dropdown the entire row on the spot has to change in red color..but the problem is once i update to false after clicking on refresh color is reflecting..

 

This is my code..will any one tell me what needs to do.I am calling color logic in grid complete

 

         $(function() {
             var lastSelectedId;
            var rowsToColor = [];
             $("#list").jqGrid({
                 url: 'sample.ashx',
                 datatype: 'json',
                 height: 250,
                 colNames: ['Name', 'ID', 'Desc', 'Date'],
                 colModel: [
                      { name: 'Name', index: 'Name', width: 256, stype: 'text', editable: true, sortable: false, editoptions: { disabled: "disabled"} },
                      { name: 'ID', index: 'ID', width: 256, stype: 'text', editable: true, sortable: false, editoptions: { disabled: "disabled"} },
                      { name: 'Desc', index: 'Desc', width: 256, stype: 'text', sortable: false, editable: true, edittype: 'select', editoptions: { readonly: true },
                           formatter: rowColorFormatter,
                          editoptions: { value: "true:true; false:false" }
                      },
                      { name: 'Date', index: 'Date', width: 256, editable: true, stype: 'text', sortable: true, sorttype: 'date', editoptions: { disabled: "disabled"} }
                           ],
                 rowNum: 10,
                 loadonce: true,
                 rowList: [10, 20, 30],
                 pager: '#pager',
                 sortname: 'name',
                 viewrecords: true,
                 sortorder: 'asc',
                 gridview: true,
                 ignoreCase: true,
                 caseSensitive: false,
                 rownumbers: true,
                 reloadAfterSubmit: false,
                 width: 1024,
                 gridComplete: function() {
                     for (var i = 0; i < rowsToColor.length; i++) {
                         var EventDesc = $("#" + rowsToColor[i]).find("td").eq(3).html();
                         if (EventDesc == "unavailable") {
                             $("#" + rowsToColor[i]).find("td").css("background-color", "#FF4D4D");
                         }
                     }
                 },
                 jsonReader: {
                     repeatitems: false
                 },
                 caption: 'Caption',
                 editurl: 'sampler.ashx',
                 onSelectRow: function(id) {
    
                     if (id && id !== lastSelectedId) {
                         $('#list').restoreRow(lastSelectedId);
                         $('#list').editRow(id, true);
                         lastSelectedId = id;
                     }
                 },

                 afterSubmit: function() {

                     $(this).jqGrid("setGridParam", { datatype: 'json' });
                     return [true];
                     alert("returnvalue");
                 }

             });

              }

             function rowColorFormatter(cellValue, options, rowObject) {
                 if (cellValue == "unavailable")
                     rowsToColor[rowsToColor.length] = options.rowId;
                 return cellValue;
             };

 

             $("#list").setGridParam({ sortname: 'CalDate', sortorder: 'asc' }).trigger('reloadGrid');

             $("#list").jqGrid('navGrid', '#pager',
                        {
                            edit: false,
                            add: false,
                            del: false,
                            search: true,
                            searchtext: "Search",
                            reloadAfterSubmit: true,
                            cloneToTop: true,
                            overlay: false,
                            beforeRefresh: function() {
                                $("#list").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
                                // onEnterrowdetails('#list');
                            }
                        });
 

             $("#list").jqGrid('editRow', {

                 aftersavefunc: function() {

                     onEnterrowdetails('#list');

                 }

             });
         });

      
         function onEnterrowdetails() {
             $('#<%=lblMessage.ClientID%>').html(" Data Updated......");
             return true;
         }
 </script>
 

  
        <table id="list" ></table>
        <div id="pager"  > </div>   
   </form>

</body>
</html>