ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: neoinbiz on August 01, 2019, 06:47:39 pm
-
How do I go about setting the DueDate in "RED" when the Date value for Due Date is past
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>";
}
}
}
];
-
Date values in the column should be in native js format.
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.
}
},
-
Thank you for you quick response.
Can you explain a little what the code is actually doing?
-
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.
-
I followed as indicated but there are no results and I have 8 dates I know are past due
Am I missing something?
[/ { 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]
-
What is the format of the dates. Please share sample data.
-
07/31/2019
-
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.
-
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.
{ 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.
}
},
}
},
-
Your syntax is incorrect. Please add render callback to the column instead of column.filter