Article
0 comment

JSLink footer override breaks pagination of web parts

A couple of weeks I was contacted via twitter about my blog post that shows how to bind JSLink override to certain web parts only. Jared Matfess (@jaredmatfess) tried my script and recognized that somehow the paging of the web part was broken. I dug deeper into this issue and found the cause of the problem. It seemed that the way how I showed the View ID was the origin.

Cause of the issue

The default paging functionality is rendered inside the footer section of the web part. If a custom rendering is attached to this footer the pagination will be deattached and will not show up again.
I tried the same script without the footer override. The pagination works. After adding the footer override back pagination refused to work again.
I experimented with certain possible workarounds, but nothing seems to work except remove the footer override.

Footer override refuse to render pagination control

Footer override refuse to render pagination control

 

Without Footer override pagination works

Without footer override pagination works

Solution

The logical thing to do was to find another place where I can show the view id without interfering the behavior of the web part. I had to put this information to the console of the browsers. Therefore I adopted the code a little bit.
I placed the view mode detection as well as the writing to the console in the on pre render function. The modified code looked like this.

The view ID just shows up in edit view. This allows developer to get all the required information to bind the JSLink override only to certain web parts, but without interfering the paging.

View ID written to console with working pagination

View ID written to console with working pagination