Conditional Formating of past due record

[neoinbiz]

How do I go about setting the DueDate in "RED" when the Date value for Due Date is past

Code: [Select]

obj.colModel = [

{ title: "ID", hidden: true, dataIndx: "ID" },
        { title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false, exportRender: false  /* no need to mention dataIndx */ },
{ title: "Task Name Name", width: 250, dataIndx: "Title", exportRender: false,
filter: { crules: [{ condition: 'contain' }],
/* filter: { type: "textbox",
        condition: 'contain',
        listeners: ['keyup']*/
     },
     render: function(ui) {
      return "<a href='" + thisWebUrl + "/Lists/" + listName + "/" + formName + ".aspx?ID=" + ui.rowData.ID + "&Source=" + encodeURIComponent(returnPage) + "'>" + ui.cellData + "</a>";
    }
},

{ title: "Assigned Date", width: 155, align:"center", dataIndx: "StartDate",
filter: { crules: [{ condition: 'equal' }],
}
},
{ title: "Due from Assigned", width: 165, align:"center", dataIndx: "DueDate",
filter: { crules: [{ condition: 'equal' }],
}
},
{ title: "Suspense Date", width: 155,align:"center",  dataIndx: "FinalReportDate",
filter: { crules: [{ condition: 'equal' }],
}
},

{ title: "Completed", width: 110, align:"center", dataIndx: "PercentComplete",
filter: { crules: [{ condition: 'equal' }],
     }
},
{ title: "Assigned From", width: 155, align:"center", dataIndx: "AssignedFrom",
filter: { crules: [{ condition: 'equal' }],
    }
},

{ title: "Primary Assigned To", width: 155, align:"center", dataIndx: "PrimaryAssignedTo",
filter: { crules: [{ condition: 'equal' }],
     },
},
{ title: "Task Description", width: 275, dataIndx: "TaskSummaryDescription",
filter: { crules: [{ condition: 'contain' }],
     },
/*Tippy code Step 1 */
     render: function(ui) {
      if(ui.cellData) {
          return "<span class='tippy-desc' data-tippy-content='" + ui.cellData + "'>" + ui.cellData.substr(0,25) + "...</span>";
      }
    }
}
];



[paramvir]

Date values in the column should be in native js format.

Code: [Select]

render: function(ui){
var dt = new Date();

        //new Date(ui.cellData) is date value of cell
        // new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()) is date value for today ( excluding time ).

if( new Date(ui.cellData) < new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()) ){
return {style:"color:red;"} //add style to the cell.
}
},


[neoinbiz]

Thank you for you quick response.
Can you explain a little what the code is actually doing?

[paramvir]

I've added comments to code in previous post. For more details please check API docs and demos for column.render callback and js Date() function.

[neoinbiz]

I followed as indicated but there are no results and I have 8 dates I know are past due
Am I missing something?

Code: [Select]

[/ { title: "Assigned Date", width: 155, align:"center", dataIndx: "StartDate",
filter: { crules: [{ condition: 'equal' }],
render: function(ui){
var dt = new Date();

        //new Date(ui.cellData) is date value of cell
        // new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()) is date value for today ( excluding time ).

if( new Date(ui.cellData) < new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()) ){
return {style:"color:red;"} //add style to the cell.
}
},
}
},
code]

[paramvir]

What is the format of the dates. Please share sample data.

[neoinbiz]

07/31/2019

[paramvir]

works fine in demo: https://paramquery.com/pro/demos/filter_header_local

can be verified by adding same render callack in OrderDate column.

Which version of grid are you using?

Please share a jsfiddle if still facing issues.

[neoinbiz]

Here is how I placed render code in the demo link and nothing changes color.
I tried fiddler but the entire preview pane is white so not sure why nothing ran on there.

Code: [Select]

    { title: "Order Date", minWidth: "190", dataIndx: "OrderDate", dataType: "date",
        filter: { crules: [{ condition: "between" }],
render: function(ui){
var dt = new Date();

//new Date(ui.cellData) is date value of cell
// new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()) is date value for today ( excluding time ).

if( new Date(ui.cellData) < new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()) ){
return {style:"color:red;"} //add style to the cell.
}
},

}
    },

[paramvir]

Your syntax is incorrect. Please add render callback to the column instead of column.filter