Though I have been late to the game, I have been very fascinated with Client Side Rendering (CSR). I have been learning a lot about it lately because of the wonderful things that it can do.
The list view web part can be broken into several pieces as highlighted below. The colored outline is what can be overridden with CSR.
Now let’s get into how we can override the Item template.
First, open up your favorite editing tool. I like to use visual studio express 2013 but you can use Notepad++, Notepad, etc.
Type in the following into your file. You will almost always have to use the below to start.
As you can see, we start out with an anonymous function and define an empty object (overrideItem). The ‘Templates’ object is used to hold a reference to all the different templates that you plan to style (Remember the image above that shows what you can override). The following line will allow us to override the ‘Item’ template.
overrideItem.Templates.Item = overrideTemplate;
The ‘overrideTemplate’ is a function that has the code of how you want to override the ‘Item’. The ‘overrideTemplate’ function styles the item in a div.
The following line is a built-in SharePoint function that will register your code for rendering.
In the ‘overrideTemplate’ function, ctx is to render the current item in the list.
The code above will produce the following:
If you are familiar with CSS, you can style it the way you want.
Hope it all make sense. Watch out for more posts on CSR.