Quick edit list table row has no id, only iid, how do i find the element?

Question

I'm trying to add conditional formatting to my list, but when i enter quick edit, my code wont work because it uses the id on the table row to change the color and for some reason the table rows in quick edit only has iid.

This is the code:

(function () {
    var overrideCurrentContext = {};
    overrideCurrentContext.OnPostRender = postRenderHandler;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);

})();

function postRenderHandler(ctx)
{
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {
        var row = document.getElementById(GenerateIIDForListItem(ctx, rows[i]));
        if(row == null)
            continue;
        else if(!(rows[i]["TimeLoadingEnd"] === ""))
            row.style.backgroundColor = '#8ff268';
        else if(!(rows[i]["TimeActualArrival"] === ""))
            row.style.backgroundColor = '#eadd9a';
        else
            row.style.backgroundColor = '#e09f9f';

    }
    ctx.skipNextAnimation = true;
}

And as you can see, the table row has no id when in quick edit mode:

Answer 1

I checked on one of my lists, and in normal view the id and the iid are the same - the second number is the actual item ID.

In quick edit view, the iid is the only one available, like you said, but the ID of the item is still the second number of the 3. Maybe change your logic to always get your ID out of the iid second term?

Answer 2

I never found a way to get an ID for the rows, so what i did instead was just get the table my its classes, then i searched for the header rows with the columnKey i wanted the conditional formatting to check for, saved this index and went through all the rows in the table. Here is the updated code

(function () {
var overrideCurrentContext = {};
overrideCurrentContext.OnPostRender = postRenderHandler;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);

})();

function postRenderHandler(ctx)
{
var rows = ctx.ListData.Row;
for (var i=0;i<rows.length;i++)
{
    var row = document.getElementById(GenerateIIDForListItem(ctx, rows[i]));
    if(row == null)
        continue;
    else if(!(rows[i]["TimeLoadingEnd"] === ""))
        row.style.backgroundColor = '#8ff268';
    else if(!(rows[i]["TimeActualArrival"] === ""))
        row.style.backgroundColor = '#eadd9a';
    else
        row.style.backgroundColor = '#e09f9f';

}
var table = document.getElementsByClassName("ms-listviewtable ms-listviewgrid")[0];
if(table){
    var row = table.rows;
    var actual = 0;
    var loading = 0;
    for(i=0; i<row[0].childNodes.length;i++){
        if(row[0].childNodes[i].thColumnKey == "TimeActualArrival")
            actual = i;
        else if(row[0].childNodes[i].thColumnKey == "TimeLoadingEnd")    
            loading = i;
    }

    if(row){
        for(i=1; i<row.length-1;i++){
            if(!row[i].childNodes[loading].textContent == "")
                row[i].style.backgroundColor = '#8ff268';
            else if(!row[i].childNodes[actual].textContent == "")
                row[i].style.backgroundColor = '#eadd9a';
            else
                row[i].style.backgroundColor = '#e09f9f';
        }
    }
}
ctx.skipNextAnimation = true;
}