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. })();
  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….