Yesterday I asked a question on SharePoint StackExchange:

• Client Side Rendering with Async dependencies

I also asked Elio Struyf on Twitter: https://twitter.com/eliostruyf/status/540473976255152128 Good idea, Elio Struyf! Now I want to try it out.

Preparations

In this case I’ll be using my example from my blog post yesterday: Drag and Drop Image using Client Side Rendering I have created a new list and added a lookup field to my previous list. What I get is a Title of the lookup item, but not my custom field called DragAndDrop. In my test I will try to load the DragAndDrop Image using an ajax call and rendering it after Client Side Rendering is done with my item. To be complete, I want to show some screenshots for my lookup field: It will result in this OOTB rendering:

If some javascript code takes too much time to execute, you probably want to see what time your code or a part of the code takes to run. I found an idea in Dave Cranes Ajax in Action. The book is a little bit old and the code provided below has been changed and simplified:

var stopwatch = {};
stopwatch.watches = \[\];
stopwatch.getWatch = function(id, startNow) {
	var watch = stopwatch.watches\[id\];
	if (!watch) {
		watch = new stopwatch.StopWatch(id);
	}
	if (startNow) {
		watch.start();
	}
	return watch;
};
stopwatch.StopWatch = function (id) {
	this.id = id;
	stopwatch.watches\[id\] = this;
	this.events = \[\];
	this.total = 0;
	this.count = 0;
};
stopwatch.StopWatch.prototype.start = function() {
	this.current = new stopwatch.TimedEvent();
};
stopwatch.StopWatch.prototype.stop = function() {
	if (this.current) {
		this.current.stop();
		this.events.push(this.current);
		this.count++;
		this.total += this.current.duration;
		this.current = null;
	}
};
stopwatch.TimedEvent = function () {
	this.start = new Date();
	this.duration = 0;
};
stopwatch.TimedEvent.prototype.stop = function() {
	var stop = new Date();
	this.duration = stop - this.start;
};

tmplItem() works even without ids. To get the current data:

$(this).tmplItem().data;
```If you want to remove, just invoke the ajax and remove with [$.parents](http://api.jquery.com/parents/):

$(this).parents(“li”).remove();

##### Updating data inside tmplItems

If you want to achieve some fancy dependency tracking, consider [knockout.js](http://knockoutjs.com/). But if you just want to update the data object inside a tmplItem, just change the object and call update:

var t = $(this).tmplItem(); var obj = t.data; obj.Address = “hello avenue”; t.update();

In one of my previous posts I showed how to retrieve data from listdata.svc with jQuery $.getJSON method. Getting data is very simple, listdata.svc provides a powerful restful interface with filtering, expanding and other features. Read the best and short introduction to listdata.svc by Suneet Sharma or a more detailed and technical article about filters, functions and operators by Mike Flasko at Microsoft with short examples here. Now back to listdata.svc in the SharePoint environment. Corey Roth provides a good images and sample results. For REST the “http verbs” are very important: GET, POST, PUT, DELETE.. SharePoint RESTful interface defines these verbs like that:

To integrate ASP.NET Ajax Toolkit is not the most straight forward task in SharePoint. If you want to take the risk, “Inspired by Technology” provides the best guide so far.