This does not work in a scenario with dynamic data and filters at all. The column immediately recolors based off the functions return value when changed.
Edit: I created a custom script to do the whole process on my own as Dundas doesn’t seem to be able to do this easily.
The following is made using script value of “table1”. You will have to adjust it or make it more dynamic for your use cases.
The following goes in “Loading” event of dashboard.
var tag = document.createElement('script');
tag.setAttribute('type', 'text/javascript');
tag.setAttribute('src', '/Scripts/chroma.js-1.3.5/chroma.min.js');
// Add the script tag.
document.head.appendChild(tag);
//cells is jquery object or array containing cell elements from a dundas datagrid table body
window.addColumnColor = function(cells){
cells = $(cells);
var cellValues = [];
for(let x = 0; x<cells.length; x++){
//get text from cell(removing non-digits) and save value
var text = $(cells[x]).children("div").children("div").text().replace(/[^\d\.]/g,'');
cellValues.push(parseFloat(text));
}
//setup all colors and scales, goes from red to yellow to green
var colors = chroma.scale(['#f44a4b', '#fff74c', '#47e534']).mode('lrgb').colors(100);
var breaks = chroma.limits(cellValues);
var scale = chroma.scale(colors).domain(breaks);
//get new cell color and update cell
for(let x = 0; x<cells.length; x++){
var result = scale(cellValues[x]).hex();
$(cells[x]).css("background-color", result);
}
};
The following goes in “Ready” event of dashboard:
//standard mutation observer
//this is required as datagrids load rows dynamically on scroll
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === 'childList') {
//send cells of column 0 to function removing totals column with slice()
window.addColumnColor($(table1.container).find(".body-table tr").find("td[colindex='0']").slice(1));
}
});
});
$(".table1 .body-table").each(function () {
observer.observe(this, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
});
The following goes in “Data Changed” event of DataGrid:
window.addColumnColor($(table1.container).find(".body-table tr").find("td[colindex='0']").slice(1));