So your rendering problem stems from the fact that in order to get a field's value on ctx.CurrentItem during rendering, you must include that column in the view.
However, in your case, you need values from a certain column, but don't want that column seen in the view. So I think in your case, something like what Stan is suggesting will work, although I'd advise finding the column index dynamically, in case the field order changes in the view. I would do that in a post-render function.
So in the part of your script where you are registering the override, I would add:
StatusFieldContext.OnPostRender = hideStatusColumn;
And then create another function:
function hideStatusColumn(ctx) {
var positionOfStatusColumn = 0;
// get all the headers
var headers = document.querySelectorAll('.ms-listviewtable th');
// loop through the headers and find your column
// based on matching the DISPLAY name
var len = headers.length;
for (var i = 0; i < len; i++) {
if (headers[i].innerHTML.indexOf('Status') != -1) {
// we found the Status column!
// but because :nth-child is 1-based not zero-based, we need to add one
positionOfStatusColumn = i + 1;
}
}
// now that we know the position of the Status column, we can hide all the cells
// only one header, so we can use querySelector
document.querySelector('.ms-listviewtable th:nth-child(' + positionOfStatusColumn + ')').style.display = 'none';
// have to get all the regular td cells, so we have to use querySelectorAll
document.querySelectorAll('.ms-listviewtable td:nth-child(' + positionOfStatusColumn + ')').forEach(function (cell) {
cell.style.display = 'none';
});
}
In response to your comment, in order to hide multiple columns, you would have to just find the positions of those columns also as you are looping through the headers, based on their full display names. Then just repeat the same code to set display:none on the other cells. Here's an updated function as an example. I have also added a check to make sure you actually found the column in the view before trying to hide it, so you don't accidentally hide something you don't want to touch:
function hideMultipleStatusColumns(ctx) {
// initialize the variables as null so we can
// check to make sure we found values later
var positionOfStatus1Column = null;
var positionOfStatus2Column = null;
var positionOfStatus3Column = null;
// get all the headers
var headers = document.querySelectorAll('.ms-listviewtable th');
// loop through the headers and find your columns
// based on matching the DISPLAY name
var len = headers.length;
for (var i = 0; i < len; i++) {
if (headers[i].innerHTML.indexOf('Status 1') != -1) {
// we found the Status 1 column!
// but because :nth-child is 1-based not zero-based, we need to add one
positionOfStatus1Column = i + 1;
}
if (headers[i].innerHTML.indexOf('Status 2') != -1) {
positionOfStatus2Column = i + 1;
}
if (headers[i].innerHTML.indexOf('Status 3') != -1) {
positionOfStatus3Column = i + 1;
}
}
// now that we know the positions of the Status columns, we can hide all the cells
// make sure we found the column before trying to hide anything
if (positionOfStatus1Column != null) {
// only one header, so we can use querySelector
document.querySelector('.ms-listviewtable th:nth-child(' + positionOfStatus1Column + ')').style.display = 'none';
// have to get all the regular td cells, so we have to use querySelectorAll
document.querySelectorAll('.ms-listviewtable td:nth-child(' + positionOfStatus1Column + ')').forEach(function (cell) {
cell.style.display = 'none';
});
}
if (positionOfStatus2Column != null) {
document.querySelector('.ms-listviewtable th:nth-child(' + positionOfStatus2Column + ')').style.display = 'none';
document.querySelectorAll('.ms-listviewtable td:nth-child(' + positionOfStatus2Column + ')').forEach(function (cell) {
cell.style.display = 'none';
});
}
if (positionOfStatus3Column != null) {
document.querySelector('.ms-listviewtable th:nth-child(' + positionOfStatus3Column + ')').style.display = 'none';
document.querySelectorAll('.ms-listviewtable td:nth-child(' + positionOfStatus3Column + ')').forEach(function (cell) {
cell.style.display = 'none';
});
}
}
