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
  1. (function() {  
  2.     var overrideCtx = {};  
  3.     overrideCtx.Templates = {};  
  4.     overrideCtx.Templates.Header = "";  
  5.     overrideCtx.Templates.Footer = "";  
  6.     overrideCtx.Templates.Item = CustomDemoItem;  
  7.     overrideCtx.OnPostRender = [];  
  8.     overrideCtx.OnPostRender.push(function() {  
  9.         //call your ready function here  
  10.     });  
  11.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
  12. })();  
Option 2
  1. (function() {  
  2.     var overrideCtx = {};  
  3.     overrideCtx.Templates = {};  
  4.     overrideCtx.Templates.Header = "";  
  5.     overrideCtx.Templates.Footer = "";  
  6.     overrideCtx.Templates.Item = CustomDemoItem;  
  7.     overrideCtx.OnPostRender = [];  
  8.     overrideCtx.OnPostRender.push(function() {  
  9.         OnPostRenderFunc();  
  10.     });  
  11.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
  12. })();  
  13.   
  14. function OnPostRenderFunc(renderCtx) {  
  15.     //call your ready function here  
  16. }  
Hope this will help some of the developer looking for same kind of answer.\
 
Happy coding….