How do I find and/or override JavaScript in Primefaces component based on widgetVar?

Question

According to this question: Multiple file upload with extra inputText I can override JavaScript function of PrimeFaces element by using widgetVar in this way:

PF('fileUpload').jq.fileupload({
    add: function(e, data) {
           ...
         }
    });

Now, I try to override function in DataTable and can't understand how do I reference to it? Moreover, PF(') returns undefined from chrome debugger console, so I can't debug it. I suspect that it's matter of scopes but don't know how to solve it.

Answer 1

There are couple more solutions as well. Depends on how deep do you want to go.

In my case I was intending to extend DataScroller's functionality.

Despite it's too late answering your question, I hope the solutions below helps others:

Solution #1 (extending current methods and adding your own ones)

PrimeFaces.widget.DataScroller = PrimeFaces.widget.BaseWidget.extend({
    init: function(cfg) {
        this._super(cfg);
            
        // only for widget with widgetVar="yourWidgetVar"
        if(cfg.widgetVar === 'yourWidgetVar') {
            this.yourCustomMethod();
        }
    },

    yourCustomMethod: function() {
        // do whatever you prefer here
    }
});

Solution #2 (extending of already existing methods aimed to specific widgets)

PF('yourWidgetVar').init = function() {

    // do whatever you prefer to extend it here

    // call the generic implementation
    PrimeFaces.widget.DataScroller.prototype.init.call(this);
};

Solution #3 (extending of already existing methods via prototypes)

    const oldLoad = PrimeFaces.widget.DataScroller.prototype.load;

    PrimeFaces.widget.DataScroller.prototype.load = function() {
        oldLoad.apply(this, arguments);
    
        // do whatever you prefer to extend it here

        // in case you need to do it for specific widget. i.e. widgetVar="yourWidgetVar"
            if(cfg.widgetVar === 'yourWidgetVar') {
                // your custom stuff here
            }
    };

Answer 2

You could use the prototype, for example overriding bindEditEvents would look like this

PrimeFaces.widget.DataTable.prototype.bindEditEvents = function() {
  ....
}