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

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

    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.



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

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

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) {

        // only for widget with widgetVar="yourWidgetVar"
        if(cfg.widgetVar === 'yourWidgetVar') {

    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;


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.