jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

XML Node Object in Custom Formatter

Tags: custom formatter formatter xml rowdata

20/12/2010
12:57

casperd

Member

Members

Forum Posts: 76

Member Since:
11/05/2009

Offline

Hi Oleg,

I have the following grid definition:

$("#tblActiveProjects").jqGrid({
url:'../Data_Templates/DTM_Projects_Select.asp?FilterType=1&TeamMemberType=1',
colNames: ['','Project Name', 'Status','Latest Update','','','','Issues','I-O','Risks','R-O','Changes','Defects'],
colModel: [
    {name:'ProjectRAGIndicator', width:20, align:'center', sortable:false, formatter:RAG_formatter},
    {name:'ProjectName', width:570, align:'left', sorttype:'text', formatter:function(cellvalue,options,rowObject){return ProjectLink_formatter(cellvalue,options,rowObject,6);}, classes:'gridLink'},
    {name:'ProjectStatus', width:90, align:'center', sorttype:'text'},
    {name:'ProjectStatusDate', width:90, align:'center', sorttype:'date', formatter:OverdueDate_formatter},
    {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', sortable:false},
    {name:'ActiveIssuesOverdue', width:0, align:'center', hidden:true},
    {name:'ActiveRisks', width:50, align:'center', sortable:false},
    {name:'ActiveRisksOverdue', width:0, align:'center', hidden:true},
    {name:'ActiveChanges', width:50, align:'center', sortable:false},
    {name:'ActiveDefects', width:50, align:'center', sortable:false}
],
   pager: '#pagerActiveProjects',
   gridview: false,
   toolbar: [true,"top"]

..................

The following is the custom formatter function:

OverdueDate_formatter = function (cellvalue, options, rowObject){
if (rowObject.childNodes[4].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>";
}
}

But it seems that the rowObject.childNodes[4].textContent is only available when the grid is intialize. After I click to sort the grid, this value returns "undefined".

Any ideas?

Thanks,

Cas

20/12/2010
13:55

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello Cas,

It seems to me that you have almost the same problem as described here. I suppose you use loadonce:true option. After the changing the datatype to 'local', the rowObject will be no more XML object. It will be JavaScript object, the element from the internal data parameter where the local data are saved.

So I recommend you test inside of your custom formatter function

if (typeof rowObject.childNodes === "undefined") {
   // rowObject is element from the local data
   // you can access the fields with dotted notation like rowObject.ProjectName
} else {
   // rowObject is initial XML object
}

Best regards
Oleg

21/12/2010
06:57

casperd

Member

Members

Forum Posts: 76

Member Since:
11/05/2009

Offline

Hi Oleg,

Again, thanks for your help!

I need to use the loadonce (for cleint side sorting, etc). But, using your suggestions, I have now been able to design a very nice generic way for my custom formatters, which could now be used by any of my jqGrids. Here is an example (we could maybe share thsi with the community):

OverdueDate_formatter = function (cellvalue, options, rowObject,iCol,sColName){
    var bIsOverdue = false;

   if (rowObject[sColName] == undefined){
       if (rowObject.childNodes[iCol].textContent == "True"){
           bIsOverdue = true;
       }
   }
   else{
       if (rowObject[sColName] == "True"){
           bIsOverdue = true;
       }
   }

   if (bIsOverdue){
       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='dashboardRectangleRed'>" + $.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' class='dashboardRectangleGreen'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
   }
}

So, from the colmodel, I would have a definition like:

{name:'ProjectStatusDate', width:90, align:'center', sorttype:'date',formatter:function(cellvalue,options,rowObject){return OverdueDate_formatter(cellvalue,options,rowObject,4,"IsOverdue");}},

I have added two parameters to my custom formatter function:

- the first is the column ID to be checked;

- the second is the column name to be checked.

Then within the formatter fucntion, I do a test to determine whether the dataset is currently remote or local, and then determine how to format, using the correct calling convention.

Thanks again for all your help!!

Cheers,

Cas

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
62 Guest(s)

Currently Browsing this Page:
1 Guest(s)