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.

 

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.

(function() {
  var displayMode;
  var showFooterDebugInfo = null;

  var myFormContext = {
    OnPreRender: function(ctx) {
      // Check if display mode have already been requested
      // Otherwise request display mode
      if (!displayMode) {
          // Fetch the display mode 
          displayMode = document.getElementById("MSOSPWebPartManager_DisplayModeName");

          // Check if displayMode has been set to Design
          // If so show debugging information 
          if (displayMode.value === "Design") {
              console.log("View ID: "+ctx.view);
          }

      }
    },
    Templates: {
        Fields: {
            Sum: {
                View: function(ctx) {
                    // Float value of field
                    var sumValue = ctx.CurrentItem['Sum.'];

                    // Text value displayed 
                    var sumText = ctx.CurrentItem.Sum;

                    if (ctx.view != '{AEC4F0D8-464E-4E40-A9E0-5C898BEA6A02}') {
                        return ctx.CurrentItem.Sum;
                    }

                    if (sumValue < 0) {
                        return "<span style='color: red'>" + sumText + "</span>";
                    } else {
                        return "<span style='color: green'>" + sumText + "</span>";
                    }
                }
            }
        }
    },
    ListTemplateType: 100
  };
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(myFormContext);
})();

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.