jQuery Grid Plugin - jqGrid

Hi Oleg,

When I put the alert(rowObject.childNodes[5].textContent); debug statement in the formatter function, it does return the values. It just seems to ignore it in the if (rowObject.childNodes[5].textContent == "True") condition. Any ideas?

Thanks,

Cas

Hi Oleg,

jqGrid Defaults:

            $.extend(jQuery.jgrid.defaults,{
                altRows: true,
                altclass: 'altRow',
                datatype: 'xml',
                emptyrecords: 'No records to display.',
                gridview: true,
                loadonce: true,
                loadui: 'disable',
                pgbuttons: false,
                pginput: false,
                //rowNum: -1,
                recordtext: '{2} items',
                sortable: true,
                viewrecords: true,
                viewsortcols: [false,'vertical',true]
            });

Grid definition:

            $("#tblActiveProjects").jqGrid({
                url:'../Data_Templates/DTM_Projects_Select.asp?FilterType=1&TeamMemberType=1',
                colNames: ['Prj. No.','Project Name', 'Status','RAG','Latest Update','','','','Issues','Risks','Changes','Defects',''],
                colModel: [
                    {name:'ProjectNumber', width:80, align:'center', sorttype:'text'},
                    {name:'ProjectName', width:445, align:'left', sorttype:'text', classes:'gridLink'},
                    {name:'ProjectStatus', width:90, align:'center', sorttype:'text'},
                    {name:'ProjectRAGIndicator', width:40, align:'center', sortable:false, formatter:RAG_formatter},
                    {name:'ProjectStatusDate', width:90, align:'center', sorttype:'date', formatter:OverdueDate_formatter, classes:'gridLink'},
                    {name:'IsOverdue', width:0, align:'center', hidden:true},
                    {name:'LinkToDashboard', width:0, align:'center', hidden:true},
                    {name:'LinkToWorkspace', width:0, align:'center', hidden:true},
                    {name:'ActiveIssues', width:50, align:'center', sorttype:'integer', classes:'gridLink'},
                    {name:'ActiveRisks', width:50, align:'center', sorttype:'integer', classes:'gridLink'},
                    {name:'ActiveChanges', width:50, align:'center', sorttype:'integer'},
                    {name:'ActiveDefects', width:50, align:'center', sorttype:'integer'},
                    {name:'Delete', width:25, align:'center', sortable:false, classes:'actionIcon', title:'Delete'}                    
                ],
                height: 90,
                sortname: 'ProjectName',
                pager: '#pagerActiveProjects',
                toolbar: [true,"top"],
                afterInsertRow: function(rowid, aData){
                    $("#tblActiveProjects").setCell(rowid,'ProjectName',"<a href='" + aData.LinkToWorkspace + "' target=_new title='Click the Project Name to open the Project Workspace'>" + aData.ProjectName + "</a>");
                    $("#tblActiveProjects").setCell(rowid,'ActiveRisks',"<a href='" + aData.LinkToWorkspace + "/Lists/Risks' target=_new title='Click to open the Project Risks list'>" + aData.ActiveRisks + "</a>");
                    $("#tblActiveProjects").setCell(rowid,'ActiveIssues',"<a href='" + aData.LinkToWorkspace + "/Lists/Issues' target=_new title='Click to open the Project Issues list'>" + aData.ActiveIssues + "</a>");
                    $("#tblActiveProjects").setCell(rowid,'Delete',"<img src='../Images/ButtonImages/delete_small.png' onclick=alert('" + rowid + "'); />");
                }
            });

Custom Formatter Fucntion:

OverdueDate_formatter = function (cellvalue, options, rowObject){
    if (rowObject.childNodes[5].textContent == "True"){
        return "<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + options.rowId + "' target=_new title='Progress Updates on this project is outdated! Click to open the latest Project Dashboard'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
    }
    else{
        return "<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + options.rowId + "' target=_new title='Click to open the latest Project Dashboard'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
    }
}

Hi Oleg,

Using just the "text" property did not work. But the following code worked:

    if (rowObject.IsOverdue == undefined){
        if (rowObject.childNodes[5].textContent == "True"){
            return "<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + options.rowId + "' target=_new title='Progress Updates on this project is outdated! Click to open the latest Project Dashboard' class='gridOverdue' style='color:#FF0000;'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
        }
        else{
            return "<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + options.rowId + "' target=_new title='Click to open the latest Project Dashboard'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
        }
    }
    else{
        if (rowObject.IsOverdue == "True"){
            return "<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + options.rowId + "' target=_new title='Progress Updates on this project is outdated! Click to open the latest Project Dashboard' class='gridOverdue' style='color:#FF0000;'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
        }
        else{
            return "<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + options.rowId + "' target=_new title='Click to open the latest Project Dashboard'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
        }
    }

It seems when the grid is created, the childNodes[5] is available, but not thereafter. Then you can use the actual column name, e.g. "rowObject.IsOverdue".

Thanks for all your help!!

Cheers,

Cas