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

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

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

Answer 2

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 current methods)

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

    // do whatever you prefer here

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