0

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:enter image description here

0

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?

  • The problem is that i dont really need the item id, i need to row id to get the element using getElementById so that i can format it – Jonas Olesen Nov 20 '17 at 12:01
0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.