Using JSLink to put Description beneath Title in DocLib

Question

I just started using JSLink, and i think it's great! But now i'm facing a problem with the following...

I have a DocLib where i want to display the Description field beneath the Title field. This works, but i need to include the actual column in the view to make it work. So now i have a view where the description is showing twice...

this is my code:

(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {
'Title': { 'View': ShowDesc }
}; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);       
    })();

function ShowDesc(ctx) {
debugger;
var fieldVal = ctx.CurrentItem.Title;
var descVal = ctx.CurrentItem["Description0"];
var fileRefVal = ctx.CurrentItem["FileRef"];

var html = "<a href='" + fileRefVal + "' target='_blank'>" + fieldVal + "</a>";
html += "<br/>" + descVal;

return html;
}

How can i hide this field/column in my view and still show the description beneath the title?

Thanks in advance!!!

Answer 1

You are currently overriding a field. You can instead override the entire view, and display the fields you wish in whatever manner you wish. You need to set a few extra properties in the overrideCtx.Templates object, but it's rather simple. Here is an example:

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Header = "<div><b>My List</b></div><table>";
    overrideCtx.Templates.Item = ItemOverride;
    overrideCtx.Templates.Footer = "</table>";

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function ItemOverride(ctx) {
    var fieldVal = ctx.CurrentItem.Title;
    var descVal = ctx.CurrentItem.Description0;    // You can use dot notation if you prefer
    var fileRefVal = ctx.CurrentItem["FileRef"];

    var html = "<td><a href='" + fileRefVal + "' target='_blank'>" + fieldVal + "</a>";
    html += "<br/>" + descVal + "</td>";

    //Add your other fields, in whatever order you like, between <td> elements

    return "<tr>" + html + "</tr>";
}

Here are some links that may help:

http://www.learningsharepoint.com/2013/04/07/styling-announcements-with-javascript-using-js-link-in-sharepoint-2013/

http://msdn.microsoft.com/en-us/magazine/dn745867.aspx