Post
Ask Question

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