DataTable: How to catch selection event with JavaScript?

UI Components for JSF
User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

14 Feb 2010, 21:30

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 Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

15 Feb 2010, 02:25

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
}

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

15 Feb 2010, 12:37

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 Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

15 Feb 2010, 13:48

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

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

15 Feb 2010, 18:17

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?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

16 Feb 2010, 00:30

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.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

16 Feb 2010, 02:17

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

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

16 Feb 2010, 09:05

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.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

16 Feb 2010, 13:29

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

Robelind
Posts: 15
Joined: 01 Dec 2009, 09:11

23 Sep 2011, 14:09

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?

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 16 guests