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.
DataTable: How to catch selection event with JavaScript?
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
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
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.
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
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
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)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.
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();
}
}
Code: Select all
dt.subscribe("rowClickEvent", handleCustomRowSelect);
handleCustomRowSelect = function(args) {
this.handleRowClickEvent(args);
var selectedRows = this.getSelectedRows();
//custom code with selectedRows
}
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
Ok, the problem is solved. The right code is
The call unsubscribe (before subscribing custom event handler) is important.
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>
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
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
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.
Subscribe method attaches a new listener to the already existing.
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>
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
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
That is why I like about YUI, so flexible to work with. Also helps PrimeFaces to provide a powerful client side api to extend.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 10 guests