2

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=..
  • The code seems correct to me. What's the error been thrown exactly? – MdMazzotti Mar 12 '14 at 8:51
  • The first error has nothing to do with jquery. I wonder how you added jquery to the masterpage and where and when you are calling the code you showed – MdMazzotti Mar 12 '14 at 9:11
  • I have updated the question with more details of the code and the error. – rohinMVP Mar 12 '14 at 9:24
  • The first error is quite descriptive. How and where did you add jquery to the page? – MdMazzotti Mar 12 '14 at 9:27
  • I have put the above code in a js file, and linked to the js file from a CEWP at the end of the page. – rohinMVP Mar 12 '14 at 9:32
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');
});
  • Thanks Md.. That was a fast hack, but now I have a problem that the column is right aligned, as its type is 'Number'. Also, I was putting off the html thing for later, as I wanted the calculated column to link to the Dispform.aspx for the record; but I would need the correct ID and ListID for that. – rohinMVP Mar 12 '14 at 10:27
  • 1
    You can link to the DispForm in SPD easily. Edit your view, select your calc field, then right click, then Format item as > Hyperlink to > Display form – MdMazzotti Mar 12 '14 at 10:31
  • I added a quick fix of the text alignment – MdMazzotti Mar 12 '14 at 11:03
  • Thanks Md. I was able to get everything working as needed, with slight changes to the jQuery snippet you shared. – rohinMVP Mar 12 '14 at 11:19
  • I tried your suggestion regarding linking to the DispForm. It works fine in the list view page; however, in my ListView Web Part, the links are lost. I get this message when I try to change the view in the Web Part: Switching to a different view removes changes you have made to this view, and may disable Web Part connections that depend on columns in this view. Could this be the problem? – rohinMVP Mar 12 '14 at 12:38
0

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.

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.