List Web Part CSR issues when sorting/filtering

Question

I'm experiencing an odd behavior using the Client Side Rendering (CSR) functionality of SharePoint 2013, with a standard List Web Part (LWP).

Here the js code (referenced using the JSLink property of the LWP):

(function () {
    var ctx = {};

    ctx.Templates = {};
    ctx.OnPostRender = [];
    ctx.OnPostRender.push(function() {
        console.log("Post rendering...");
        LoadMyCallouts();
    })

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

My custom function "LoadMyCallouts" uses callout.js to attach a callout on the row elements of the LWP. The callout will be open on clicking a row in the LWP.

On page load, all is working fine: all callouts are created successfully and I can easily test it by clicking on each view rows and seeing the callout opening.

The odd behavior starts when I sort a field on the LWP or just filter by a field. From console log I can see that "LoadMyCallouts" is correctly executed, but I can't get displayed anymore the callout on row click event.

In particular, the view loses all row callouts after sorting. While after filtering, the LWP loses only the callouts of the filtered elements. When clearing the filter I'm still able to display the callout of the rows, except those previously filtered.

Please share you experiences.

Thank you.

Answer 1

I'm not happy with the following workaround. Hope some expert may come with a better answer.

If I set a timeout the handlers are correctly reattached to the view rows either on sorting or filtering actions.

(function () {
    var ctx = {};

    ctx.Templates = {};
    ctx.OnPostRender = [];
    ctx.OnPostRender.push(function() {
        console.log("Post rendering...");
        setTimeout(LoadMyCallouts,1000);
    })

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

This is really sad because it may mean that the PostRendering function is NOT exactly invoked on the post render event of the view rows, but a little earlier.

Answer 2

I'm not sure if this is better, because I do not fully understand why it works. However, based on this comment here, I was able to add this line, and it worked.

_spBodyOnHashChange = function(){HighLightRows(ctx);ajaxNavigate._raiseNavigate(ajaxNavigate);}

"HighLightRows" was the name of my OnPostRender function here. I added that line above this line in script similar to the OP's.

var ctx = {};

The post states,

From my understanding, _spBodyOnHashChange is triggered each time something after the # in the address bar is changed. In a Sharepoint list this happens during sort as it calls Inplview. If there is a better function to override to achieve the same effect I’d be glad to hear it as I’m rather new to SP and JS.