JSLink on Listitems disables sorting function

Question

When trying to put following Script into a CEWP on a Listview:

 ; (function () 
  {
var fieldJsLinkOverride = {};
fieldJsLinkOverride.Templates = {};
fieldJsLinkOverride.Templates.Fields =
    {
        'Title': { //Titelfeld
        'View': function () {
         return '<a href=\" //url of th sp site' + ctx.CurrentItem.ItemID+ '\" target=\"_blank\">'+ctx.CurrentItem.Title+'</a>'  
                            }
              }
    };

// Register the rendering template
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride);
 })();

So this changes the Title field into my desired link, this works all fine, but when i try to sort the list, it returns following:

  Unable to get property 'ItemID' of undefined or null 

Does anyone know this problem or might find a solution for it?

Answer 1

You are using ctx in your code but you have not passed it to your function..

Remember Each of the functions you write for JS Link will be passed a “context” object as a parameter. From this object you can retrieve properties about the current list, current list item and other objects.

Refer below code. Here we are passing ctx to a function. Try this :

{
        'Title': { //Titelfeld
        'View': function (ctx) {
         return '<a href=\" //url of th sp site' + ctx.CurrentItem.ItemID+ '\" target=\"_blank\">'+ctx.CurrentItem.Title+'</a>'  
                            }
              }
    };