Show list items in custom format like Repeater or DataList using CSR

Question

Am quite new to CSR. WE have requirement wherein we have to show list item values in a non tabular format (unlike grid view).Data should display like Repeater or DataList.

Update: Generally we apply CSR on a view of a list like this;

This view is nothing but like a Gridview (having a tabular format) of columns and rows. Whereas we have requirement wherein we wanna show list data like this (Like a repeater which has free form layout);

Kindly let know how to override the rendering of view to display data like above.

Kindly let know if any further details required.

Answer 1

Yes web can implement this using CSR. Refer below code:

Note : Change/Design HTML template and CSS accordingly (Refer variable listItemHtml). Here I have created a demo template only. You will have to your HTML and CSS according to your need.

Refer below CODE :

window.CSR = window.CSR || {};
window.CSR.listItem = {
    customItemHtml: function (ctx) {
        var listItemHtml = '<div class="container"><nav><ul><li><a href="#"><img src="' + ctx.CurrentItem.Image + '" height="50" width="50"></a></li></ul></nav>';
        listItemHtml += '<article><h1>Test</h1><p>' + ctx.CurrentItem.multicheck + '</p><p>' + ctx.CurrentItem.LastName +'</p></article></div>'
        return listItemHtml;
    }
};

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = "<span></span>";
    overrideCtx.Templates.Item = window.CSR.listItem.customItemHtml;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

CSS for above code :

div.container {width: 50%;}
nav {float: left;max-width: 160px;margin: 0;padding: 1em;}
nav ul {list-style-type: none;padding: 0;}
nav ul a {text-decoration: none;}
article {margin-left: 170px;padding: 1em;overflow: hidden;}

OutPut of the above code :