1,804 articles and 14,735 comments as of Saturday, April 2nd, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint (Joel Oleson) 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.

Wednesday, March 4, 2009

JQuery for Everyone: $.grep and calcHTML Revisited

Comments: 21

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

First, I noticed that I created an unnecessary extension of jQuery with “$.calcHTML = function()…” I stopped that practice. Second, I noticed that the filter, “.filter(”:contains(<DIV)”)…” did not really find HTML in need of rendering, it found the beginnings of DIV tags.

In this updated version (tested with jQuery 1.3.1 in IE7 and FF3 with preview pane or grouping and in List View or Form), I wanted to cast a wide net to find HTML that needed rendering. To do that, I started by creating my array of elements just like before. Then I filtered the array using $.grep. The grep utility in jQuery, like the Unix function, finds things quickly in large data sets.

Of the original arrayList, I only returned items with text matching the regular expression “/<[^<]+?>/” back into arrayList. That one line of code does a lot but runs very quickly. Overall, this current script runs on my test page in 36ms (about 10ms slower than Christophe’s POJ version) — but because this script casts a wider net, we have more flexibility in our calculated columns.

For instance, instead of wrapping a link tag in a DIV, I can just use the formula:

="<a href='"&[url_field]&"'>"&[Title]&"</a>"

<script type="text/javascript">
if(typeof jQuery=="undefined"){
	var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";
	document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>
<script type="text/javascript">
function calcHTML() {
/*
Add or replace the following selectors to the arrayList variable
New groups are added by comma:
Example: var arrayList = $("td.ms-vb,td.ms-vb2");

td.ms-vb 			= Data View Web Part
td.ms-vb2 			= List View Web Part
td[id='SPFieldCalculated']	= Standard Form Calc Column
td.ms-stylebody			= Boxed View Styles
td.ms-formbody			= Standard Form
td.ms-cal-monthitem a		= Calendar Month
table.ms-cal-tweekitem a	= Calendar Week
*/
    var arrayList = $("td.ms-vb2");
 	arrayList = $.grep(arrayList, function(e,i){
		return ($(e).text().match(/&lt\;.+?&gt\;|<.+?>/));
	});
	$.each(arrayList, function(i,e){
		$(e).html($(e).text().replace(/&lt;(.+?)&gt;/g,'<$1>'));
    });
}
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
    $("#tbod"+groupName+"_").attr("isloaded",isLoaded).html(htmlToRender).show("fast",calcHTML());
}
$(function() {
    calcHTML();
    if (typeof showpreview1=='undefined') {
		return;
	}else{
        $("td.ms-vb-title").bind("mouseover", function(){
            showpreview1(this);
            calcHTML();
        });
    }
});
</script>

Second version (tested cross-browser with many different views of data):

<script type="text/javascript">
if(typeof jQuery=="undefined"){
	var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";
	document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>
<script type="text/javascript">
function calcHTML() {
	var arrayList = $("table.ms-listviewtable").find("td")
		.add("td.ms-vb")
		.add("td[id='SPFieldCalculated']")
		.add("td.ms-stylebody")
		.add("td.ms-formbody")
		.add("td.ms-cal-monthitem a")
		.add("td.ms-cal-defaultbgcolor a")
		.add("table.ms-cal-tweekitem a")
		;//comment out unused lines above for better performance
	arrayList = $.grep(arrayList, function(e,i){
		return ($(e).text().match(/&lt\;.+?&gt\;|<.+?>/));
	});
	$.each(arrayList, function(i,e){
		$(e).html($(e).text().replace(/&lt;(.+?)&gt;/g,'<$1>'));
    });
}
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
    $("#tbod"+groupName+"_").attr("isloaded",isLoaded).html(htmlToRender).show("fast",calcHTML());
}
$(function() {
    calcHTML();
    if (typeof showpreview1=='undefined') {
		return;
	}else{
        $("td.ms-vb-title").bind("mouseover", function(){
            showpreview1(this);
            calcHTML();
        });
    }
});
</script>

Update: 2009-03-04

I updated the selector to include the title link on calendar views.

Update: 2009-03-05

I updated the selector to include the cells of a Data View Web Part and the current day of a calendar web part.

Update: 2009-03-05

On second thought. All of the additional selectors for every various possibility started to slow things down. I did adjust the regular expressions to replace HTML-encoded data but I’ll have to post another article about that and how we might use it.

If you have a case other than the List View Web Part, check the chart for your situation and make the appropriate change to the arrayList selector. If you have a custom theme or custom web part, you may have to do your own searching within the DOM.

Again, this version fits the original intent which was to test on List Views.

The second version will run slower (because it’s looking for more objects) but seems to fit more of the wild variations people create out of an htmlCalc column. To speed up the second version, you can comment out the lines starting with .add that you aren’t using. See version one’s list of known references. If you find new ones, please comment here. Thanks.

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 Wednesday, March 4, 2009 at 11:12 am
Filed under jquery · Tagged with Calculated Column, Javascript, jquery

Please Join the Discussion

21 Responses to “JQuery for Everyone: $.grep and calcHTML Revisited”

niax says:

March 4, 2009 at 1:19 pm

Great job Paul!
Now the only thing I miss is this jquery to work with calendar views.
Well that is not all true I do wish I had some jquery understanding as well, but for now I have to stick with what you guys deliver and I am truly impressed!
Are you planning on getting this to work for calendar views as well, Paul?

Thanks a lot!

/niax

Reply
AutoSponge says:

March 4, 2009 at 8:54 pm

Thanks for the idea. I updated the script to support calendar views. Let me know how your testing goes.

~Paul

Reply
Christophe says:

March 4, 2009 at 10:16 pm

Coincidence…I was just checking out the grep() function this week. I was not convinced that it would bring any improvement in this case. What is the benefit of grep() here, compared to a standard selector?

Reply
Christophe says:

March 4, 2009 at 10:44 pm

Paul, I also tested your script in a calendar with an “advanced” use case and it didn’t work. I’ll send you the formula I used.

Reply
AutoSponge says:

March 4, 2009 at 11:07 pm

@Christophe

Grep seems to be a very efficient way to reduce an array facing an expensive process.

By using grep, I was able to remove any logic from my function that applies the DOM manipulation.

Since DOM manipulation is usually a more expensive operation, I wanted to only process the required records.

Definitely send me the test case, I had never thought of using calcHTML in a calendar view before last night.

Reply
Christophe says:

March 4, 2009 at 11:21 pm

In the first link of your post you’ll find all the tutorials related to the HTML calculated column.
The most frequent request for calendars is color coding, but there are other applications.
The latest addition is the use of the method to write scripts. The next step in the series will be – as you could expect: “using calculated columns to write jQuery”!

Reply
niax says:

March 5, 2009 at 5:32 am

Hi Paul,
I tried the updated version as well in a calender view, but did not succeed.

/niax

Reply
AutoSponge says:

March 5, 2009 at 8:08 am

@niax

Are you using the default theme/template/css?
What formula did you use?
What exactly failed?

Reply
AutoSponge says:

March 5, 2009 at 1:47 pm

I updated the selector to include cells from a DVWP and current month calendar day.

Reply
AutoSponge says:

March 6, 2009 at 12:25 am

Today’s updates come with a lot of testing help from Peter Allen. This should show better results in IE than the previous version.

For some reason, IE only found 77 of the 112 elements on the test page so I had to alter the selector method to use .add. I didn’t notice any speed difference so I left both versions in this post.

If you’re not sure which one to use, start with version 2.

Thanks,
Paul

Reply
Christophe says:

March 6, 2009 at 1:47 am

Version 2 worked for my test.

Reply
Christophe says:

March 6, 2009 at 1:53 am

btw the first version has a dummy jQPath, I was wondering if you did this on purpose.

Reply
AutoSponge says:

March 6, 2009 at 11:46 am

@Christophe

Thanks for catching that, I fixed it.

Reply
niax says:

March 10, 2009 at 2:35 pm

Sorry for my late response, Paul!
I tested the second version as well, and it worked quite well, thank you!
On that page I also had PlanetWilsons Coulor Calendar, and it stoped working, if any one is intrested to know. I didn’t dig any further in the matter to try to work things out.

Reply
Detlef says:

April 3, 2009 at 4:22 pm

I am trying to combine both your calcHTML() and collapseText() so that my Lists can contain blocks and have the ability to collapse and expand large multiline text fields. Since each has their own version of ExpGroupRenderData() I was not able to figure out how to support both in the same script.

Reply
AutoSponge says:

April 5, 2009 at 11:43 am

@Detlef,

I have a few articles coming out this week which might help. One about an abbreviated AOP script which works very nicely and another about jQuery plugins that return /this/ (which allows the chaining of methods).

Reply
Vijay says:

September 10, 2009 at 9:02 am

Is there any way to replace the Links in a SharePoint Monthly/Weekly/Daily Calendar View to point to a Custom page?

For example –

If there is a Calendar on a SharePoint page the detail page usually is –

/Lists/MyCalendar/DispForm.aspx?ID=2

I want to replace this link with something like –

/pages/EventDetails.aspx?itemid=2

How to do this with JQuery, your help will be greatly appreciated. Thanks!

Reply
Charlie Epes says:

October 7, 2009 at 2:00 pm

Hi Paul:
I have a squirrely formula that wraps up minutes (numbers) into a time format:

=TEXT(TIME(0,Minutes,0),”HH:MM”)

Thus far, I cannot seem to get any HTML calculated column code to work. And yes, I am grouping by a field called [Month].

Any ideas?

Thanks-Charlie Epes
Buffalo, NY

Reply
AutoSponge says:

October 28, 2009 at 8:41 am

@Vijay,

To do this with jQuery (not sure if that’s the best long term solution), find the links: $(”a[href*='/Lists/MyCalendar/DispForm.aspx?ID=']“), then iterate over the group using $.each(). While you do that, perform a RegEx replace on the href attribute.

@Charlie,

That formula does not have any HTML in it, what is it that you need to appear as HTML?

Reply

Trackbacks

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

The HTML Calculated Column, one year later « Path to SharePoint says:

September 3, 2009 at 10:49 am

[...] SharePoint bloggers. On EndUserSharePoint.com for example, you’ll find Paul Grenier’s jQuery version of the script, and a detailed example by Jim Bob Howard: the payroll [...]

Reply
Smart TextToHTML « Path to SharePoint says:

January 16, 2010 at 12:58 am

[...] example, Paul Grenier proposed a jQuery version of my script, which allows you to grab only certain cells. If HTML Calculated Columns are only in List View [...]

Reply