4

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.

  • Could be the MDS Minimal Download Strategy Feature is reloading part of the page and thus destroying all the events you attached? What happens if you disable the MDS Feature in Site-Settings? – Danny '365CSI' Engelman Oct 30 '15 at 11:07
  • 1
    The MDS feature is not active. – Emiliano Poggi Oct 30 '15 at 12:02
3

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.

  • Did you ever find a correct solution for this issue? A timeout seems really bad practice like you said... I'm facing the same issue at the moment :) – Perneel Jun 21 '16 at 11:24
  • I am also interested in the issue... – lanes Sep 28 '16 at 8:05
  • Has anybody got the solution to this yet – Mohit Nov 21 '16 at 6:24
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.