JSLink - How to check the list item whether is draft?

Question

I wanted to highlight list items which is checked-out and draft. I found a solution for checked-out items but I couldn't find how can I check the list item is draft (minor version). I am sure that there must be a solution with SharePoint Web API's. But I am looking something like I mentioned below.

var rows = ctx.ListData.Row;

for (var i = 0; i < rows.length; i++) {
    if (rows[i]["CheckedOutUserId"] != "") {
        var rowId = GenerateIIDForListItem(ctx, rows[i]);
        var row = $(document.getElementById(rowId));
        row.css("backgroundColor", "#f8d7da");
    }
}

Answer 1

Check _UIVersionString for each item.

Demo:

var versionNumb = Number(rows[i]["_UIVersionString"]);
if(versionNumb !== parseInt(versionNumb)){
    var rowId = GenerateIIDForListItem(ctx, rows[i]);
    var row = document.getElementById(rowId);
    row.style.backgroundColor = "#f8d7da";
}

Summary:

<script>
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {
        var versionNumb = Number(rows[i]["_UIVersionString"]);
        if (rows[i]["CheckedOutUserId"] != "" || versionNumb !== parseInt(versionNumb)) {
            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);
            row.style.backgroundColor = "#f8d7da";
        }

    }
  }
});
</script>

Result:

Answer 2

https://www.codeproject.com/Articles/620110/%2FArticles%2F620110%2FSharePoint-Client-Side-Rendering-List-Views

Example: Color coding

Let's consider a more real-world example - color coding. So for example, I want to paint green all rows from a document library that have status "Approved".

Since there's not much of a customization here - I need just to change a css property of an existing element, - best way to accomplish this would be to use OnPostRender event and manipulate DOM elements that were rendered by CSR.

From OnPostRender, the ctx is accessible, thus it is not a problem to determine which documents were approved (given the Approved column is included into the view). The only tricky thing is to get the ID of the element that represents the row. Here I cheated a bit, by peeking into the CSR guts and finding a function, that generates row ids (but obviously, you can also figure out these IDs from the page source and generate them manually).

Now everything is simple: we have the element IDs, and we can acquire field values from ctx (after a short investigation I found them in the ctx.ListData.Row array).

So here's the final code:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {
      var isApproved = rows[i]["_ModerationStatus"] == "Approved";
      if (isApproved)
      {
        var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
        var tr = document.getElementById(rowElementId);
        tr.style.backgroundColor = "#ada";
      }
    }
  }
});

This will work for English portal, but better make it international. For that, you need to replace "_ModerationStatus" with "_ModerationStatus." (dot at the end!), and compare with 0.

0 is for Approved

3 is for Draft

In short

var isDraft =rows[i]["_ModerationStatus."] == "3"; //_ModerationStatus. Draft is 3 Approved is 0
      if (isDraft)
      {
       //backgroundColor...
      }