Format part of the column value in a ListView Web Part

Question

I have a list containing a few items, some of which are marked as compliant. So I have a column for marking it as compliant, and another calculated column, where I have the calculated value as Title (Compliant)

Now, I am showing this data on a page using a ListView Web Part. My requirement is that the Web Part should display the text as Title (Compliant), ie., the text Compliant should be formatted such that it stands out from the rest of the text.

How can I achieve this?

Update: I have the below code in a js file linked from a CEWP on my page, but it is throwing some errors:

<script type="text/javascript" src="/Style%20Library/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var $body = $('body');
  var html = $body.html();
  var newHtml = html.replace(/\(Compliant\)/g, '<span style="font-weight:bold;">(Compliant)</span>');
  $body.html(newHtml);
});
</script>

The errors are as below:

Message: Sys.InvalidOperationException: The PageRequestManager cannot be initialized more than once. Line: 688 Char: 13 Code: 0 URI: http://mysite/ScriptResource.axd?d=..   
Message: Could not complete the operation due to error 80020101. Line: 2 Char: 2568 Code: 0 URI: http://mysite/Style%20Library/js/jquery-1.11.0.min.js   
Message: 'childNodes' is null or not an object Line: 5246 Char: 3 Code: 0 URI: http://mysite/_layouts/1033/init.debug.js?rev=..

Answer 1

I think the easiest way to accomplish what you're trying to do is modifying the calculated column so that it can emit html formatted string directly.

Change the return type of your calculated column to Number, then edit the formula to something like:

="<span class='fixMyHead'>" & Title & " <b>(Compliant)</b></span>"

Now, in order to left-align the column td and th, you can use a bit of jQuery:

$('.fixMyHead').each(function(){  
    $td = $(this).parents('td:first');   
    $td.closest('table').find('th').eq($td.index()).find('.ms-numHeader').css('text-align', 'left');
    $td.children(':first').css('text-align', 'left');
});

Answer 2

What version of SharePoint are you using?

If you’re using SharePoint 2013 I would recommend you to look at the rendering possibilities with JSLink. JSLink is perfect for conditional formatting.