rich:dataTable - row selection/highlighting

[hfu1]

Does anyone know how to do single row highlighting when selected, when using a datatable?

The main problem is basically allowing only 1 single row to be highlighted at any one time (not multi-select) - clicking a row show ensure other rows' colors are reset.

And - how will any solution work with the paginator component and/or sorting of the table?

Doing something like this doesn't work. I placed it just under the rich:dataTable declaration, to try and work with the colors on the event of a row click.

Perhaps another approach would be to do the row selection management in the backing beans, and then somehow get the tag to render based on a property supplied by it. I have tried using the rowClasses attribute on the tag - only works the first time the table is rendered - and not on successive row clicks.

<a4j:support id="rowSelectedLink" onsubmit="document.getElementsByTagName('theTable').backgroundColor='#FFFFFF';this.style.backgroundColor='#0099ff'" event="onRowClick" data="#{row.id}" actionListener="#{rowList.rowSelected}"/>

Seems like a really common use of a dataTable, but I can't find any good examples anywhere.

Thanks

[icai]

I don't know if it can be useful to you. But if it helps it'll be my pleasure.

onRowClick i call a jsFunction and pass it rowindex as a parameter. I set this rowIndex in one hidden variable (in bean). Now oncomplete event of jsFunction I call a javascript function. This function iterates the datatable and when it finds the rowIndex saved in hidden variable it higlights that row. This iteration also helps me to change the color of rows on onMouseOver and onMouseOut event but at the same time do not reset the color of highlighted row.

Hope this helps.

[vh]

I am actually looking for the answer for a different question:

I want to be able to click on a row to select this row and do some operation on this row (like delete). The problem is: how do I know a row is clicked on in my bean code.

By looking at your posting, I kind of getting an idea. Can you explain that in more detail? sample code will be very helpful.

[vh]

I think data="#{row.id}" is the way to pass the row id to the Bean's action method, but how can the action method get this id?

how to "iterates the datatable" with js? Do you mean parse the generated html?

[ilya_shaikovsky]

data - used to transfer some object from server to client.

Use parameters inside your command contols to transwer rowKey to server.

[jmiguel77]

I have some code that works for me in highlighting one single row and cleaning any other highlighted (if any)

what i am really looking for is how to call a backingBean method by making an a4j.ajax.submit when the row is clicked (and also highlighted) so i can work with the current selected row in the backing bean code

thanks

[ilya_shaikovsky]

a4j:support on the onclick event placed in column should be the right way.

[vh]

But how to get the selected row id and how to pass it to the backing bean?
I found a way that onRowClick(), I parse the html of "this", and pick up the id (which is saved in a hidden column), then I put the row id into a hidden text field, submit the form to send the hiddend text field content to the server, so the bean can get it.

Is there a better solution? I suggest RichFaces team put in a build in support for this. ICEFaces has this feature.

[ilya_shaikovsky]

use rowKey which you may pass to server through f:param.

[hfu1]

Ok thanks everyone for their replies, using a combination of techniques I did the following:

1) Added a hidden column in my data table - ID. This is my internal Id which does not need to be seen by a user.

2) used Javascript on the page to do the row highlighting using the <a4j:support> events - onRowClick, onSubmit and onComplete. I had to write some functions that remembers which row (id) has been selected. The functions will ensure that the old rows have been deselected.

3) used the rowClasses attribute on the data table to set initially selected rows (if any).

[perfectpitch]

Dear Hfu1, I'd really appreciate some code snippets of your solution. I'm trying to create a 'details' table to be shown when users click rows of another table, and I believe your strategy fits well.
Thanks in advance.

[hfu1]

PerfectPitch, first make sure you add a hidden column with the IDs.
Then you need some javascript to handle the row colouring, both selected/unselected rows and also a colour to handle hovering You need something like this, note the css class names come from a stylesheet that you will define that should contain the colours for the rows.

var styleHolder;
 var clickedRow;
 var lastSelectedId = 'none';
 var tableId;
 var selectedRowClassName = 'selectedRow';
 var hoveredRowClassName = 'hoveredRow';
 var unSelectedRowClassName = 'unSelectedRow';

 function onBeforePage(tableName) {
 if (lastSelectedId == 'none') {
 var rows = findTable(tableName).rows;
 if (rows.length > 1) {
 lastSelectedId = rows[1].cells[0].innerHTML;
 }
 }
 }

 function onPage(tableName) {
 onTableRefresh(tableName);
 }

 function findTable(tableName) {
 var allTables = document.getElementsByTagName("table");
 var table = null;
 for (i=1; i<allTables.length; i++) {
 if (allTables.id.indexOf(tableName) > -1) {
 table = allTables;
 }
 }
 return table;
 }

 function onOver(elmt) {
 tableId = elmt.parentNode.parentNode.id;
 if(elmt.className.indexOf(selectedRowClassName)==-1) {
 styleHolder = elmt.className;
 elmt.className = hoveredRowClassName;
 }
 }

 function onOut(elmt) {
 if(elmt.className.indexOf(selectedRowClassName)==-1) {
 elmt.className = styleHolder;
 }
 }

 function onTableRefresh(tableName) {
 var allRows = findTable(tableName).rows;

 for (i=1; i<allRows.length; i++) {
 var rowId = allRows.cells[0].innerHTML;
 if (rowId != lastSelectedId) {
 allRows.className = unSelectedRowClassName;
 }
 else {
 allRows.className = selectedRowClassName;
 }
 }
 }

 function onClick(elmt) {
 var selectedId = elmt.cells[0].innerHTML;
 lastSelectedId = selectedId;
 var allRows = elmt.parentNode.parentNode.rows;

 for (i=1; i<allRows.length; i++) {
 var rowId = allRows.cells[0].innerHTML;
 if (rowId != selectedId) {
 allRows.className = unSelectedRowClassName
 }
 else {
 allRows.className = selectedRowClassName
 }
 }
 }

Your datatable tag should have these attributes:
onRowMouseOver="onOver(this)"
onRowMouseOut="onOut(this)"

The table should enclose an a4j:support tag which handles a row click - this will allow you to update your 'details' panel.

<a4j:support id="rowSelectedLink" event="onRowClick" data="#{myRow.id}" actionListener="#{myTable.rowSelected}" onsubmit="onClick(this)" reRender="detailsPanel"/>




Hope this helps,
H

[perfectpitch]

I'll have a look at it ASAP. Thanks for your kind support.