0

I want to change the Standard Sharepoint view List from standard view :
Item1
Item2
Item3
enter image description here

To Side By Side Items :
Item1 Item2 Item3
My JS :

(function () { 

        var priorityFiledContext = {}; 
        priorityFiledContext.Templates = {}; 
        priorityFiledContext.Templates.Fields = { 
            "LinkFilename": { "View": priorityFiledTemplate }           
        };          
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext); 

    })(); 

function priorityFiledTemplate(ctx) { 
    var results= "";
    var FullName = ctx.CurrentItem.FileLeafRef;     
    Results = "<a title='Folder' <img src='/Style%20Library/icons/folder.png'></a><div title="+FullName+" style='text-align: center'>"+FullName+"</div>";  
    return Results;
}

1 Answer 1

1

Here just a simple template for your reference:

<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
            Templates: {                
                Body: function (ctx, field, listItem, listSchema) {
                    var data = ctx.ListData.Row;
                    //the logic how you render your data.                    
                    var tmprow = "<div style='float:left;margin:20px 10px 20px 20px'>{0}</div>";
                    var row="";
                    for (i = 0; i < data.length; i++) {
                        //replace with your default folder render format
                        var OOBRender = "<a class='ms-listlink' onmousedown='javascript:VerifyFolderHref(this,event,'','FALSE','1','','','');return false;' onclick='return HandleFolder(this,event,'/Shared%20Documents/Forms/AllItems.aspx?RootFolder=%2FShared%20Documents%2F{0}&amp;FolderCTID=0x0120005E9B0D4B8E07CF489B29BEB10374CED0&amp;View=%7B57E22E8F%2D35FD%2D4E5E%2DBAFE%2D7084F8036667%7D','TRUE','FALSE','','FALSE','1','','','','','1','0','0','0x7fffffffffffffff');' onfocus='OnLink(this)' href='/Shared%20Documents/Forms/AllItems.aspx?RootFolder=%2FShared%20Documents%2F{1}&amp;FolderCTID=0x0120005E9B0D4B8E07CF489B29BEB10374CED0&amp;View=%7B57E22E8F%2D35FD%2D4E5E%2DBAFE%2D7084F8036667%7D'>{2}</a>";

                        row += tmprow.replace("{0}", OOBRender.replace("{0}", data[i].FileLeafRef).replace("{1}", data[i].FileLeafRef).replace("{2}", data[i].FileLeafRef));
                    }
                    return "<table><tr><td>" + row + "</td></tr></table>";
                },                
            }
        });        
    </script>

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.