Row color is not reflecting until reload grid is clicked.

<div id="spPostIndexContent31336" class="spPostContent">

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>

</div>

Hi mcfarlandparkway,

Thanks for your post.

Firstly, if you’d like to highlight some rows of grid, you could refer to the below link that discussed about this issue.

mcfarlandparkway

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");
                         }
                     }
                 },

Secondly, you could try to set reloadAfterSubmit  to true.

Besides, you could post your problem in jqGrid Forum for professional help.

Best Regards,

Fei Han

Hi,

   Thank you for replying,I am not getting any help from that post.

 

I tried by setting to true,its not working..

grid complete is only called when a redraw is done (reload of grid). you need to do your color logic in row save.

Hi Fei Han,

                Will you pleas elet me know how can i use the below code in my page..

Hope the below one has to work On pressing enter we have to update the color.

$(‘#list’).keypress(function(event) {

var keycode = (event.keyCode ? event.keyCode : event.which);

if (keycode == ’13′) {

$("#list").setGridParam({ datatype: ‘json’, page: 1 }).trigger(‘reloadGrid’);

}

});

 or—-below..one

$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == ’13′){
alert(‘You pressed a "enter" key in somewhere’);
}
});

Thanks in advance..

Hi bruce,

               In my code i have only aftersavefunc .. will you please put the code in the format plz..i am confused..

Leave a Reply