Calling jQuery function on rendering complete event in JSLink

In this blog you will learn how you can call jQuery function on rendering complete event in JSLink using SharePoint 2013.

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…