Page 1 of 2
DataTable: How to catch selection event with JavaScript?
Posted: 14 Feb 2010, 21:30
by Oleg
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.
Re: DataTable: How to catch selection event with JavaScript?
Posted: 15 Feb 2010, 02:25
by cagatay.civici
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
}
Re: DataTable: How to catch selection event with JavaScript?
Posted: 15 Feb 2010, 12:37
by Oleg
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.
Re: DataTable: How to catch selection event with JavaScript?
Posted: 15 Feb 2010, 13:48
by cagatay.civici
Yes, this.onEventSelectRow(args) selects the row for you meaning changes style class to selected and adds the row to selected rows.
Re: DataTable: How to catch selection event with JavaScript?
Posted: 15 Feb 2010, 18:17
by Oleg
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?
Re: DataTable: How to catch selection event with JavaScript?
Posted: 16 Feb 2010, 00:30
by Oleg
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.
Re: DataTable: How to catch selection event with JavaScript?
Posted: 16 Feb 2010, 02:17
by cagatay.civici
Yes, I see you first unsubscribe PrimeFaces built-in rowSelectHandler. Built-in one was only attached when selection is enabled though.
Re: DataTable: How to catch selection event with JavaScript?
Posted: 16 Feb 2010, 09:05
by Oleg
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.
Re: DataTable: How to catch selection event with JavaScript?
Posted: 16 Feb 2010, 13:29
by cagatay.civici
That is why I like about YUI, so flexible to work with. Also helps PrimeFaces to provide a powerful client side api to extend.
Re: DataTable: How to catch selection event with JavaScript?
Posted: 23 Sep 2011, 14:09
by Robelind
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?