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.

A lot of people use the term CSR interchangeably with JSLink but they both mean different things.  JSLink is the new property that is part of SharePoint 2013 web parts and it allows you to point to a JavaScript file.

CSR is a combination of JavaScript, HTML and CSS that allows you to change how a list view web part is rendered to the page.  You can also modify display, edit, and new forms.

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.

// JavaScript source code
(function () {
    var overrideItem = {};
    overrideItem.Templates = {};
    overrideItem.Templates.Item = overrideTemplate;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideItem);
})();

function overrideTemplate(ctx) {

return "
<div style='font-size:18px;border:solid 1px Silver;margin-bottom:6px;padding:4px;width:200px;'>" + ctx.CurrentItem.Title +"-" + ctx.CurrentItem.Description + " ("+ ctx.CurrentItem.Status +") "+ "</div>
";
}

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.

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideItem);

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.

SharePoint