Board index JavaServer Faces General DataTable: How to catch selection event with JavaScript?

DataTable: How to catch selection event with JavaScript?

Components, Ajax Framework, Utilities and More.

Oleg User avatar
Expert Member

Posts: 3715
Location: Russia, Siberia => Germany, Black Forest
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.
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 15103
Location: Cybertron

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

dt.subscribe("rowClickEvent", handleRowSelect);


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

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

Oleg User avatar
Expert Member

Posts: 3715
Location: Russia, Siberia => Germany, Black Forest
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.
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 15103
Location: Cybertron

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

Oleg User avatar
Expert Member

Posts: 3715
Location: Russia, Siberia => Germany, Black Forest
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)

   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

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?
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/

Oleg User avatar
Expert Member

Posts: 3715
Location: Russia, Siberia => Germany, Black Forest
Ok, the problem is solved. The right code is

        <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.
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 15103
Location: Cybertron

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

Oleg User avatar
Expert Member

Posts: 3715
Location: Russia, Siberia => Germany, Black Forest
Even better without unsubscribe and "super" call.

        <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.
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 15103
Location: Cybertron

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


Posts: 15
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?

Next

Return to General