The DataView control and “external templates”
The first (and only!) example on templates we’ve studied until now relied on defining templates within the control that was attached to the DataView MS AJAX control. At the time, I said that the DataView control also supported external templates. To illustrate this feature, we’ll change our initial example so that the template is hosted outside the DOM node that is attached to the DataView control (I’m only showing the markup since the JS code is the same):
We’ve introduce a new UL element which defines the template that will be used by the DataView control. As you can see, we no longer need to apply the sys-template css class to the UL that is attached to the DataView control that will be created during initialization time. What we need to do is set its itemTemplate property. We do that by setting the dv:itemtemplate attribute to the ID of the HTML element that “defines” the template.
We can even go one step further: we can influence the place where the DataView control will put the HTML generated through the template instantiation. Take a look at the following improved snippet:
This snippet is really similar to what we had. There is, however, one difference: we’re using the dv:itemplaceholder attribute to set the value of the DataView’s itemPlaceholder property. Do notice that the place holder will end up seeing its display set to none so that you can’t see it when the page is loaded. If we hadn’t used the itemPlaceholder property, the contents of the UL element would have been replaced by the new nodes obtained through the template instantiation process.
And that’s it for now. We’ll keep looking at MS AJAX in the next posts. Stay tuned for more!