1,804 articles and 15,139 comments as of Sunday, May 15th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

Thursday, December 11, 2008

JQuery for Everyone: HTML Calculated Column

Comments: 14

Christophe, at Path to SharePoint, created one of the most important scripts for quickly and easily punching up the List View and List Form web parts, the HTML Calculated Column. His creative uses for this mashup of data and HTML always inspires me.

Thats why I wanted to rewrite his script for jQuery (you still need to make sure your calculated column has a <DIV> tag using all caps, but it no longer has to start with it). The thing that shocked me the most: ExpGroupRenderData was rewritten to one line of code!

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    //load jQuery
    google.load("jquery", "1.2.6");
</script>
<script type="text/javascript">
//make a fn for reuse
$.calcHTML = function() {
    //loop through TDs moving text node to html
    $("td.ms-vb2,td[id$='Calculated'],td.ms-stylebody,td.ms-formbody").filter(":contains(<DIV)").each(function(){
        $(this).html($(this).text());
    });
};
//call calcHTML on DOM ready for ungrouped rows
$(function() {
    $.calcHTML();
    if (showpreview1) { //check for preview script
        $("td.ms-vb-title").bind("mouseover", function(){
            showpreview1(this);
            $.calcHTML();
        });
    }
});
//replace ExpGroupRenderData, call calcHTML for grouped rows
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
    $("#tbod"+groupName+"_").attr("isloaded",isLoaded).html(htmlToRender).show("fast",$.calcHTML());
}
</script>

Paul Grenier

View all entries in this series: PaulGrenier-JQuery for Everyone»

Entries in this series:

I recommend SharePoint resources daily on my twitter account here.

Posted by AutoSponge on Thursday, December 11, 2008 at 7:00 am
Filed under Tips and Tricks · Tagged with

Please Join the Discussion

14 Responses to “JQuery for Everyone: HTML Calculated Column”

Christophe says:

December 11, 2008 at 8:10 am

Hey! Is it Christmas already? ;-)

Very interesting, Paul… and now I have a good reason to learn jQuery!

One question: did you test this script for boxed and newsletter views?

Reply
AutoSponge says:

December 11, 2008 at 8:59 am

Newsletter works. Adding ,td.ms-stylebody to the selector list makes it work on boxed (I’ll make that change above).

I’m working on Preview, trying to get the calcHTML to fire…

Reply
AutoSponge says:

December 11, 2008 at 9:53 am

@Christophe,

Thanks for pointing out the multiple view styles. It took some detective work but I figured out a way to adjust the mouseover behavior for Preview style as well.

Reply
Paul says:

December 11, 2008 at 11:10 am

This a great little gem; even for SharePoint Designers

Reply
Dan Wilcox says:

December 18, 2008 at 3:35 pm

Excellent solution. It’s one of those, “Wow…why didn’t I think of that?” solutions that everybody in SharePoint Land needs to know about. Great work, both of you!

Reply
niax says:

February 27, 2009 at 9:23 am

Hi Paul,

Christophe have a javascript to make this work in calendar view as well. Would it be possible to make the jquery handle that as well. I really would like to get a way from having to start with a tag.

You are both some kind of heroes, thanks a lot!

Reply
Yeshwanth says:

May 28, 2009 at 8:18 am

Hi Paul,

Excellent article. Thanks for that. I am having a sharepoint site in which I am trying to create a text column in the tasks list. However, this column should be from client side script. Can you tell me how I can do this using Jquery, it would be glad if you can post some pseudo code on that.

Thanks,
yeshwanth

Reply
AutoSponge says:

May 28, 2009 at 5:42 pm

Yeshwanth,

I would not try to add a column. I would create a column and replace its contents with mine. The best examples of this uses the calcHTML technique. Christophe’s site has several examples and I wrote a jquery version of that code (it’s also included in several of my other projects).

Reply
Robert Sandoval says:

August 5, 2009 at 4:07 pm

Great ideas from both you and PathToSharepoint bloggers.

However, I have a Dataview WP that is displaying the html code of a rich text column. Is there a CEWP that can hide html code on the page?

Reply
- Joe says:
  
  March 30, 2010 at 5:32 pm
  
  @ Robert, yes you can definitely do that with the right code
  
  @ All
  
  I use this script on my calendar to display extra data via fields in a calculated event title. I then use a script that creates a popup that displays the extra data when the item is moused over. It is working really great, thanks!
  
  For the calendar view, you can add this line to work on the event titles (if ONLY using all-day events):
  $(”td.ms-cal-defaultbgcolor”).filter(”:contains(<DIV)").children('a').each(function(index) {
  $(this).html($(this).text());
  });
  
  Reply
Tom says:

January 11, 2011 at 11:42 am

The script throws an error in IE 8:

Line: 961
Error: ’showpreview1′ is undefined

What is the purpose of showpreview1?

Reply

Trackbacks

Check out what others are saying about this post...

JQuery for Everyone: AOP in Action - loadTip Gone Wild | End User SharePoint says:

March 3, 2009 at 10:05 pm

[...] I updated this script to render calcHTML columns (see HTML Calculated Column and jQuery calcHTML [...]

Reply
JQuery for Everyone: $.grep and calcHTML Revisited | End User SharePoint says:

March 4, 2009 at 11:13 am

[...] Every once in a while, good scripts need a second look. The calcHTML idea popularized by Christophe has such potential for frequent use, I decided to see if I can improve on my previous work (link). [...]

Reply
jQuery for Everyone | Halwsa.Net says:

February 12, 2010 at 8:26 am

[...] JQuery for Everyone: HTML Calculated Column [...]

Reply