Home > Microsoft SharePoint, SharePoint2013 > SharePoint 2013: Calling jQuery function on rendering complete event in JSLink

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….

Advertisements
  1. gpmonch
    February 26, 2015 at 4:22 pm

    Hi Prasad, this is just what I was looking for! thank you very much!
    But I still add to use a very short time out inside the OnPostRenderFunc for my solution to work.
    I also get a tag with the web part’s id after each item row, do you know how to solve this issue?
    Kind Regards,
    Guy

    • March 2, 2015 at 6:47 am

      Hi gpmonch,

      Your issue description is not clear to me, can you please explain more?

      Regards,
      Prasad Pathak

  2. October 31, 2016 at 11:18 pm

    Thanks man, solved my issue.

  1. January 24, 2014 at 12:01 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: