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.

NothingButSharePoint.com
Thursday, December 11, 2008

JQuery for Everyone: HTML Calculated Column

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:
  1. JQuery for Everyone: Accordion Left Nav
  2. JQuery for Everyone: Print (Any) Web Part
  3. JQuery for Everyone: HTML Calculated Column
  4. JQuery for Everyone: Dressing-up Links Pt1
  5. JQuery for Everyone: Dressing-up Links Pt2
  6. JQuery for Everyone: Dressing-up Links Pt3
  7. JQuery for Everyone: Cleaning Windows Pt1
  8. JQuery for Everyone: Cleaning Windows Pt2
  9. JQuery for Everyone: Fixing the Gantt View
  10. JQuery for Everyone: Dynamically Sizing Excel Web Parts
  11. JQuery for Everyone: Manually Resizing Web Parts
  12. JQuery for Everyone: Total Calculated Columns
  13. JQuery for Everyone: Total of Time Differences
  14. JQuery for Everyone: Fixing Configured Web Part Height
  15. JQuery for Everyone: Expand/Collapse All Groups
  16. JQuery for Everyone: Preview Pane for Multiple Lists
  17. JQuery for Everyone: Preview Pane for Calendar View
  18. JQuery for Everyone: Degrading Dynamic Script Loader
  19. JQuery for Everyone: Force Checkout
  20. JQuery for Everyone: Replacing [Today]
  21. JQuery for Everyone: Whether They Want It Or Not
  22. JQuery for Everyone: Linking the Attachment Icon
  23. JQuery for Everyone: Aspect-Oriented Programming with jQuery
  24. JQuery for Everyone: AOP in Action - loadTip Gone Wild
  25. JQuery for Everyone: Wiki Outbound Links
  26. JQuery for Everyone: Collapse Text in List View
  27. JQuery for Everyone: AOP in Action - Clone List Header
  28. JQuery for Everyone: $.grep and calcHTML Revisited
  29. JQuery for Everyone: Evolution of the Preview
  30. JQuery for Everyone: Create a Client-Side Object Model
  31. JQuery for Everyone: Print (Any) Web Part(s) Plugin
  32. JQuery for Everyone: Minimal AOP and Elegant Modularity
  33. JQuery for Everyone: Cookies and Plugins
  34. JQuery for Everyone: Live Events vs. AOP
  35. JQuery for Everyone: Live Preview Pane
  36. JQuery for Everyone: Pre-populate Form Fields
  37. JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
  38. Use Firebug in IE
  39. JQuery for Everyone: Extending OWS API for Calculated Columns
  40. JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
  41. JQuery for Everyone: Email a List of People with OWS
  42. JQuery for Everyone: Faster than Document.Ready
  43. jQuery for Everyone: Collapse or Prepopulate Form Fields
  44. jQuery for Everyone: Hourly Summary Web Part
  45. jQuery for Everyone: "Read More..." On a Blog Site
  46. jQuery for Everyone: Slick Speed Test
  47. jQuery for Everyone: The SharePoint Game Changer
  48. JQuery For Everyone: Live LoadTip
 

Please Join the Discussion

14 Responses to “JQuery for Everyone: HTML Calculated Column”
  1. Christophe says:

    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?

  2. AutoSponge says:

    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…

  3. AutoSponge says:

    @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.

  4. Paul says:

    This a great little gem; even for SharePoint Designers

  5. Dan Wilcox says:

    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!

  6. niax says:

    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!

  7. Yeshwanth says:

    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

  8. AutoSponge says:

    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).

  9. Robert Sandoval says:

    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?

    • Joe says:

      @ 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());
      });

  10. Tom says:

    The script throws an error in IE 8:

    Line: 961
    Error: ’showpreview1′ is undefined

    What is the purpose of showpreview1?

Trackbacks

Check out what others are saying about this post...
  1. [...] I updated this script to render calcHTML columns (see HTML Calculated Column and jQuery calcHTML [...]

  2. [...] 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). [...]

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




Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!