DataTable: How to catch selection event with JavaScript?

Hello Cagatay,

I have following use case: menubar items should be enabled / disabled dependent on datatable row selection (no selection, one row or more as one row selected). I would like to avoid roundtrip to server and do this on the client side only. How can I achieve that? I suppose I have to use PrimeFaces JavaScript because PrimeFaces extends YUI DataTable. But I didn't find a callback in datatable.js which could be called after row selection.

Thanks a lot!
- Oleg.

[optimus.prime]

Oleg you need to attach a listener to rowClickEvent, assuming widgetVar of datatable is "dt".

Code: Select all

dt.subscribe("rowClickEvent", handleRowSelect);


Code: Select all

handleRowSelect = function(args) {
    this.onEventSelectRow(args);

    var selectedRows = this.getSelectedRows();
   //custom code with selectedRows
}


Thanks Cagatay,

I thought, I would overwrite the default handler with dt.subscribe("rowClickEvent", handleRowSelect);

But how I can see I have to call at first this.onEventSelectRow(args) to execute buit-in rowClickEvent-handler. Right?

I will try it tomorrow.

[optimus.prime]

Yes, this.onEventSelectRow(args) selects the row for you meaning changes style class to selected and adds the row to selected rows.

cagatay.civici wrote:

Yes, this.onEventSelectRow(args) selects the row for you meaning changes style class to selected and adds the row to selected rows.

Well. What I meant - you have an own handleRowClickEvent (PrimeFaces extends YUI DataTable)

Code: Select all

   handleRowClickEvent : function(args) {
      this.onEventSelectRow(args);
   
      if(this.isDynamic()) {
         document.getElementById(this.rowSelectParam).value = this.selectedRowsState.join(',');
      } else {
         var selectedRows = this.getSelectedRows(),
         selectedRowIndexes = [];
         
         for(var i=0; i < selectedRows.length; i++) {
            selectedRowIndexes[i] = this.getRecord(selectedRows[i]).getData('rowIndex');
         }
         
         document.getElementById(this.rowSelectParam).value = selectedRowIndexes.join(',');
      }
      
      if(this.configs.update) {
         this.doInstantRowSelectionRequest();
      }
   }


Therefore, in my opinion, the right code would be

Code: Select all

dt.subscribe("rowClickEvent", handleCustomRowSelect);
handleCustomRowSelect = function(args) {
    this.handleRowClickEvent(args);

    var selectedRows = this.getSelectedRows();
   //custom code with selectedRows
}


I have to call handleRowClickEvent and not onEventSelectRow in my custom function. Right?

Ok, the problem is solved. The right code is

Code: Select all

        <script type="text/javascript">
            PrimeFaces.onContentReady('dataTable', function() {
                dtWidget.unsubscribe("rowClickEvent");
                dtWidget.subscribe("rowClickEvent", handleCustomRowSelect);
            });

            handleCustomRowSelect = function(args) {
                this.handleRowClickEvent(args);
                var selectedRows = this.getSelectedRows();
                jQuery("#display").html(selectedRows.length);
            }
        </script>


The call unsubscribe (before subscribing custom event handler) is important.

[optimus.prime]

Yes, I see you first unsubscribe PrimeFaces built-in rowSelectHandler. Built-in one was only attached when selection is enabled though.

Even better without unsubscribe and "super" call.

Code: Select all

        <script type="text/javascript">
            PrimeFaces.onContentReady('dataTable', function() {
                dtWidget.subscribe("rowClickEvent", handleCustomRowSelect);
            });

            handleCustomRowSelect = function(args) {
                var selectedRows = this.getSelectedRows();
                jQuery("#display").html(selectedRows.length);
            }
        </script>


Subscribe method attaches a new listener to the already existing.

[optimus.prime]

That is why I like about YUI, so flexible to work with. Also helps PrimeFaces to provide a powerful client side api to extend.

How to do this in 3.0?
I notice that the subscribe() method no longer exists for the datatable component.
I suspect it is setupSelectionEvents() that should be used, but what is the syntax?