Sharepoint 2013 JSLINK template with view grouping rendering

Question

I'm looking for a tutorial or documentation on how to create a JSLINK rendering template that will perform view grouping rendering. I need to use this in connection with the list view webpart, where I have configured its view to group items by a given field. Any assistance would be greatly appreciated.

score 4 · Accepted Answer · edited Oct 31 '13 at 10:36

4

I found the way to make it work:

overrideCtx.Templates.Group = CustomGroup;

function CustomGroup(ctx, group, groupId, listItem, listSchema, level, expand) {
    var html = '<div style="float:left">' + listItem[group] + ' : </div>';
    return html;
}

edited Oct 31 '13 at 10:36

Robert Lindgren

24,520
12
53
79

answered Oct 31 '13 at 09:00

user19654

64
2

I tried this and it does modify the Grouping section, however, the issue I am having is that all of my Grouping sections are enlisted without the items that belong to them, and then all items are stacked below the groupings. Any ideas? – Boris Jan 28 '15 at 15:06
Seems that a workaround addressing this issue is being discussed here: http://sharepoint.stackexchange.com/questions/149622/csr-is-also-applied-to-a-group-by-header-in-a-listview – DmytroL Feb 27 '16 at 18:05
Make sure you have selected the group to be shown expanded and not default collapsed – bonm014 Jun 30 '17 at 13:28

score 1 · Answer 2 · answered Oct 31 '13 at 09:15

Martin Hatch has a series on how to use JSLink

The following items are or will be covered

Part 1 – Overview, URL Tokens and Applying JSLink to objects
Part 2 – Changing how individual fields display
Part 3 – Creating a custom editing interface
Part 4 – Validating user input
Part 5 – Creating custom List Views
Part 6 – Creating View Templates and Deployment Options
Part 7 – Code Samples

Sharepoint 2013 JSLINK template with view grouping rendering

2 Answers2

Linked