How to fire loadComplete after new row is added in jqgrid?

Question

I have a custom formatter that fire inside loadComplete of jqgrid. Need the same custom formatter to work when a row is dynamically added too. So i was thinking to call loadComplete() like any normal function. Custom formatter works well when grid is loaded, but does not take effect when a row is added later.

add row dynamically

function addRow(cfgid,cfgname,hostname,osname,cfgDesc,productId,cfgType,updateDate,emailAddress,absolutePath,fileName,productVersion,converted)
{

    var myrow = {cfgId:cfgid, '':'', cfgName:cfgname, hostname:hostname, osname:osname, cfgDesc:cfgDesc, productId:productId,hostname:hostname,cfgType:cfgType,updateDate:updateDate,emailAddress:emailAddress,absolutePath:absolutePath,fileName:fileName,productVersion:productVersion,converted:converted};

    $("#list1").addRowData(cfgid, myrow,"first");
    //$("#list1").loadComplete(); does not work
    $("#list1").trigger("reloadGrid");
    $("#list1").sortGrid('updateDate', true, 'desc');

}

JqGrid

function drawDynamicGrid(xml)
{
    var emptyMsgDiv = $('<div>No configurations loaded</div>');

    var xmlObject=StringtoXML(xml);
    var getColumnIndexByName = function (grid, columnName) {
        var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
        for (; i < l; i += 1) {
            if (cm[i].name === columnName) {
                return i; // return the index
            }
        }
        return -1;
    },
    grid = jQuery("#list1"),
    convertIcon = '<span class="ui-state-default" style="border:0" id="converted"><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span></span>',
    iconAlert = '<span class="ui-state-error" style="border:0" id="expired"><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span></span>';
    grid.jqGrid({

      datastr : xml,
      datatype: 'xmlstring',
      colNames:['cfgId','Name', 'Host','Operating System', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By','','','',''],
      colModel:[
          {name:'cfgId',index:'cfgId', width:90, align:"left", hidden:true},
          {name:'cfgName',index:'cfgName', width:80, align:"left", formatter: 'showlink', formatoptions: {baseLinkUrl: '#'} },
          {name:'hostname',index:'hostname', width:70, align:"left"},
          {name:'osname',index:'osname', width:90, align:"left"},
          {name:'cfgDesc',index:'cfgDesc', width:80, align:"left"},
          {name:'productId',index:'productId', width:40, align:"left"},
          {name:'cfgType',index:'cfgType', width:50, align:"left"},
          {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"left"},
          {name:'emailAddress',index:'emailAddress', width:120, align:"left"},
          {name:'absolutePath',index:'absolutePath', width:90, align:"left", hidden:true},
          {name:'fileName',index:'fileName', width:10, align:"left", hidden:true},
          {name:'productVersion',index:'productVersion', width:10, align:"left", hidden:true},
          {name:'converted',index:'converted', width:10, align:"left", hidden:true}
      ],
      pager : '#gridpager',
      rowNum:10,
      rowList:[10,50,100],
      scrollOffset:0,
      height: 'auto',
      emptyrecords: 'No configurations loaded',
      autowidth:true,
      viewrecords:true,
      gridview: true,
      multiselect: true,
      xmlReader: {
          root : "list",
          row: "Response",
          id: "cfgId",
          userdata: "userdata",
          repeatitems: false
      },

      loadComplete: function () {

            var count = grid.jqGrid('getGridParam');
            var ts = grid[0];
            if (ts.p.reccount === 0) {
                grid.hide();
                emptyMsgDiv.show();
            } else {
                grid.show();
                emptyMsgDiv.hide();
            }

            //for showlink and icon alert having date difference more than 90 days
            var iRow, row, trClasses, $cell,
            icfgName = getColumnIndexByName(grid, 'cfgName'),
            iupdateDate = getColumnIndexByName(grid, 'updateDate'),
            iconverted = getColumnIndexByName(grid, 'converted'),

            mygrid = grid[0],
            rows = mygrid.rows,
            cRows = rows.length,
            myLink = function (e) {
                var $td = $(e.target).closest('td'),
                    text = $td.text(),
                    $tr = $td.closest('tr'),
                    rowid = $tr[0].id;
                    goToViewAllPage(rowid);
            };
        for (iRow = 0; iRow < cRows; iRow += 1) {
            row = rows[iRow]; // row.id is the rowid
            trClasses = row.className.split(' ');
            if ($.inArray('jqgrow', trClasses) > 0) {
                // the row is a standard row (only if subGrid:true are used)
                var cellvalue1,firstDate,secondDate;
                $cell = $(row.cells[icfgName]);
                cellvalue1=$(row.cells[iupdateDate]).text();
                firstDate = new Date();
                //console.info(cellvalue1+", "+cellvalue1.length);
                //var cellvalue1="08-18-2011 11:49:01";
                var convertedText=$(row.cells[iconverted]).text();
                if(cellvalue1.length>25)
                {

                    secondDate=new Date();
                    //secondDate = secondDate.substring(0, secondDate.length-3);

                    if(diffOf2Dates(firstDate,secondDate,true)>=expireCondition)
                    {
                        $cell.prepend(iconAlert);
                    }
                    $cell.click(myLink);
                }
                else
                {
                    if(cellvalue1.length!=1)
                    {

                        secondDate = cellvalue1.substring(0, cellvalue1.length-6);
                        if(diffOf2Dates(firstDate,secondDate,false)>=expireCondition)
                        {
                            $cell.prepend(iconAlert);
                        }
                        $cell.click(myLink);
                    }

                    //I want to add this Icon when a new row is added using addRowData
                    if(convertedText=="yes"&&supportEng)$cell.prepend(convertIcon);


                }
            }
        }

        }
    });
    grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});

    var myGrid = $("#list1");
    $("#cb_"+myGrid[0].id).hide();
    // place div with empty message insde of bdiv
    emptyMsgDiv.insertAfter(grid.parent());

    $("#list1").trigger("reloadGrid");
    $("#list1").sortGrid('updateDate', true, 'desc');
    $("#list1").setGridParam({rowNum:10});

}

Update

Server Response

<list>
  <Response>
    <cfgId>1223</cfgId>
    <cfgName>ld</cfgName>
    <cfgDesc>fhdf</cfgDesc>
    <cfgType>Production</cfgType>
    <fileName>4.xml</fileName>
    <absolutePath>../../../xmlrepository/121/4_ver3.xml</absolutePath>
    <emailAddress>mk@aol.com</emailAddress>
    <projectId>121</projectId>
    <hostname>abc-dev-01.24hourfit.com</hostname>
    <createDate>2012-12-07 12:15:48.0 IST</createDate>
    <updateDate>2012-12-07 12:15:48.0 IST</updateDate>
    <state>1</state>
    <productId>3</productId>
    <osname>Linux</osname>
    <productVersion>1.0 HotFix5</productVersion>
    <converted>yes</converted>
  </Response>
  <Response>
    <cfgId>1224</cfgId>
    <cfgName>DD</cfgName>
    <cfgDesc>dfsd</cfgDesc>
    <cfgType>Production</cfgType>
    <fileName>2.xml</fileName>
    <absolutePath>../../../xmlrepository/121/2_ver1.xml</absolutePath>
    <emailAddress>mk@aol.com</emailAddress>
    <projectId>121</projectId>
    <hostname>vkeh-jam</hostname>
    <createDate>2012-12-07 12:21:31.0 IST</createDate>
    <updateDate>2012-12-07 12:21:31.0 IST</updateDate>
    <state>1</state>
    <productId>3</productId>
    <osname>HP-UX</osname>
    <productVersion>5.0</productVersion>
    <converted>no</converted>
  </Response>
</list>

goToViewAllPage function

function goToViewAllPage(rowid)
{
    var pageLoadContent='<table id="detailTable" width="100%"><tbody><tr><td align="center">Please Wait</td></tr><tr><td align="center"><img src="/informaticaCSM/infa9/csm/view/include/images/loading.gif" alt="Loading"/></td></tr></tbody></table>';
    //rowid=rowid.substring(4, rowid.length);
    $("#nextPageLoading").pageLoad({content:pageLoadContent});
    $("#nextPageLoading").css({"cursor":"wait"});
    $("#pageLoadingBackground").css({"cursor":"wait"});

    var rowData = jQuery("#list1").getRowData(rowid); 
    configid = rowData['cfgId'];
    configname=rowData['cfgName'];
    configdesc=rowData['cfgDesc'];
    configenv=rowData['cfgType'];
    filename=rowData['fileName'];
    updatedate=rowData['updateDate'];
    absolutepath=rowData['absolutePath'];
    productname=rowData['productId'];
    productversion=rowData['productVersion'];
    converted=rowData['converted'];

    //emailid=rowData['emailAddress'];
    emailid=logid;

    var form_ref=document.createElement("form");
    form_ref.id="viewform";
    form_ref.name="viewform";
    form_ref.action=redirectMainUrl+"showResult.action";
    form_ref.method="post";
    form_ref.target="_self";
    document.body.appendChild(form_ref);

    var cfgstField = document.createElement("input");
    cfgstField.name="sessiontoken";
    cfgstField.type="hidden";
    cfgstField.value=sessiontoken;
    form_ref.appendChild(cfgstField);

    var cfgidField = document.createElement("input");
    cfgidField.name="cfgid";
    cfgidField.type="hidden";
    cfgidField.value=configid;
    form_ref.appendChild(cfgidField);

    var cfgnameField = document.createElement("input");
    cfgnameField.name="cfgname";
    cfgnameField.type="hidden";
    cfgnameField.value=configname;
    form_ref.appendChild(cfgnameField);

    var cfgdescField = document.createElement("input");
    cfgdescField.name="cfgdesc";
    cfgdescField.type="hidden";
    cfgdescField.value=configdesc;
    form_ref.appendChild(cfgdescField);

    var cfgenvField = document.createElement("input");
    cfgenvField.name="cfgenv";
    cfgenvField.type="hidden";
    cfgenvField.value=configenv;
    form_ref.appendChild(cfgenvField);

    var cfgfileField = document.createElement("input");
    cfgfileField.name="cfgfile";
    cfgfileField.type="hidden";
    cfgfileField.value=filename;
    form_ref.appendChild(cfgfileField);

    var cfgabsField = document.createElement("input");
    cfgabsField.name="absFileName";
    cfgabsField.type="hidden";
    cfgabsField.value=absolutepath;
    form_ref.appendChild(cfgabsField);

    var cfgdateField = document.createElement("input");
    cfgdateField.name="updatedDate";
    cfgdateField.type="hidden";
    cfgdateField.value=updatedate;
    form_ref.appendChild(cfgdateField);

    var cfgproductField = document.createElement("input");
    cfgproductField.name="productname";
    cfgproductField.type="hidden";
    cfgproductField.value=productname;
    form_ref.appendChild(cfgproductField);

    var cfgproductVersionField = document.createElement("input");
    cfgproductVersionField.name="productversion";
    cfgproductVersionField.type="hidden";
    cfgproductVersionField.value=productversion;
    form_ref.appendChild(cfgproductVersionField);

    var projectIdField = document.createElement("input");
    projectIdField.name="projectid";
    projectIdField.type="hidden";
    projectIdField.value=$("#projectId").val();
    form_ref.appendChild(projectIdField);

    var cfgprevPageField = document.createElement("input");
    cfgprevPageField.name="backpage";
    cfgprevPageField.type="hidden";
    cfgprevPageField.value=$("#backPage").val();
    form_ref.appendChild(cfgprevPageField);

    var hiddenEmailField = document.createElement("input");
    hiddenEmailField.setAttribute("type", "hidden");
    hiddenEmailField.setAttribute("name", "emailaddress");
    //hiddenEmailField.setAttribute("value", document.getElementById("usernamespan").innerHTML);
    hiddenEmailField.setAttribute("value", emailid);
    form_ref.appendChild(hiddenEmailField);

    var hiddenEmailField = document.createElement("input");
    hiddenEmailField.setAttribute("type", "hidden");
    hiddenEmailField.setAttribute("name", "fullemailid");
    hiddenEmailField.setAttribute("value", fullEmailId);
    form_ref.appendChild(hiddenEmailField);    

    var hiddenConvertedField = document.createElement("input");
    hiddenConvertedField.setAttribute("type", "hidden");
    hiddenConvertedField.setAttribute("name", "converted");
    hiddenConvertedField.setAttribute("value", converted);
    form_ref.appendChild(hiddenConvertedField);

    setTimeout(function(){
        form_ref.submit();
    }, 10);


}

Answer 1

I would suggest you to remove the current code from loadComplete to custom formatter. Using of custom formatters, cellattr or rowattr in combination with gridview: true is the most effective way to fill the grid. See the answer for more details.

You can change the definition of 'cfgName' column to the following:

{name: 'cfgName', width: 80, classes: "myLink",
    formatter: function (cellValue, options, rowObject) {
        var converted = rowObject.converted === undefined ?
                $(rowObject).find(">converted").text(): rowObject.converted,
            updateDate = rowObject.updateDate === undefined ?
                $(rowObject).find(">updateDate").text(): rowObject.updateDate;
        return (isAlertedDate(updateDate) ? iconAlert: "") +
            (converted === "yes" ? convertIcon : "") +
            "<span>" + cellValue + "</span>";
    },
    cellattr: function () {
        return " title=\"Click here to go to ViewAllPage\"";
    }}

You can use use your current diffOf2Dates function inside of the implementation of isAlertedDate. Moreover I suggest don't use links (<a>) at all to make the code more easy. Instead of that I use classes: "myLink" and I defined the following CSS

.myLink { text-decoration: underline; cursor: pointer; }

The resulting grid will look exactly as before:

To execute some JavaScript code on click on the link (and even on click in the cell with the link) one can use beforeSelectRow or onCellSelect callback. For example

beforeSelectRow: function (rowid, e) {
    var iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]);
    if (this.p.colModel[iCol].name === 'cfgName') {
        //alert("GO!!!");
        goToViewAllPage(rowid);
        return false;
    }
}

You can see what I mean on the demo.