Archive

Archive for November, 2013

SharePoint 2013: How to change the group rendering in JSLink

November 1, 2013 13 comments

Hi Friends,

It was very painful to change the list view web parts UI using XSLT changes in MOSS and SP2010. A new exciting client side rendering (CSR) feature provided in SharePoint 2013. We have seen it is pretty good and easy to implement in Content Search web part with display templates. Another addition is for list view rendering and it is called as JS link. Using JS link we can change the list view rendering with a JavaScript file easily. It will also help to debug the list view rendering from client side and easy to develop JavaScript than XSLT.

Scenario:  If we added a grouping condition in list view and we want to change the default rendering of grouping.A requirement to change the rendering of the group in JSLink.I tried multiple options and not able to found any help related to group rendering. After debugging in developer tool I found a way.

Override group template using following line of JS code-

overrideCtx.Templates.Group = CustomGroup;

Add following function which will change the group rendering-

function CustomGroup(ctx, group, groupId, listItem, listSchema, level, expand) {

var html = '<div style="font-weight:bold">' + listItem[group] + ' :: </div>';

return html;

}

Hope this will help some of the developer looking for same kind of answer.

Happy coding….

Advertisements