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; enter image description here

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);

enter image description here

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

Kindly let know if any further details required.

  • Do you want to know more on CSR concept or what?? Jul 5, 2017 at 14:06
  • I would suggest you use REST api instead of CSR in such a scenario mainly because of development time and flexibility.
    – Tanmay
    Jul 6, 2017 at 7:06

1 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;


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 :

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.