SharePoint 2013 - Calling Jquery Function On Rendering Complete Event In JSlink

Hello Friends,

 

Once again a new finding I wanted to share with you related to JSLink in SharePoint 2013.

 

Scenario

 

I am displaying some data from list using a XSLTListView web part in SharePoint 2013 page. I have selected JSLink option to give a matching UI to that data.Data is getting rendered properly with new UI using my custom JSLink file but I wanted to call a jQuery function after loading of all the rows gets completed so that my jQuery call will not fail and will get the rendered rows properly.

 

Solution

 

We need to provide a handler on OnPostRender event or we can call the function directly as shown in following code, though no huge difference between those two –

 

Option 1

(function() {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = "";
    overrideCtx.Templates.Footer = "";
    overrideCtx.Templates.Item = CustomDemoItem;
    overrideCtx.OnPostRender = [];
    overrideCtx.OnPostRender.push(function() {
        //call your ready function here
    });
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Option 2

(function() {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = "";
    overrideCtx.Templates.Footer = "";
    overrideCtx.Templates.Item = CustomDemoItem;
    overrideCtx.OnPostRender = [];
    overrideCtx.OnPostRender.push(function() {
        OnPostRenderFunc();
    });
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function OnPostRenderFunc(renderCtx) {
    //call your ready function here
}

Hope this will help some of the developer looking for same kind of answer.\

 

Happy coding….