Experiences with t:dataTable row clicking, selecting, and highlighting

[Mike Kienenberger <mk...@gmail.com>]

For what it's worth, here's a summary of my experiences yesterday
where I got row clicking working on t:dataTable using javascript.
Note that I'm a javascript novice and that most of what you see below
was adapted from (incomplete) code that others posted previously.
This task was written for a facelets environment.

There's room for improvement.  The javascript doesn't restrict changes
to table body rows, but also does the header rows -- that's my
javascript inexperience showing.

Other recommendations -- it seems like this task could be accomplished
without setting a rowId.   Again, it's beyond my javascript ability to
figure out how to find the selected row, but it seems like it should
be possible.  I'd also be nice if it could be done without providing a
table id.  This id references are what require the majority of the
backing bean code.

Another neat trick would be to put this into a facelets include file
and somehow guarantee that each instance of the included table was
assigned its own unique backing bean.

Some css style classes for selecting/unselecting.

<style type="text/css">
	.unselectedRow {
		background-color: white;
	}
	.selectedRow {
		background-color: orange;
	}
</style>
						
A javascript method to set/unset the selected row and to change highlighting.

<script language="JavaScript" type="text/javascript">
//<![CDATA[
function colorizeRow(tableId, selectedRowId, rowId, rowIndex) {
    var selectedIndexInput = document.getElementById(selectedRowId);
	var oldValue = selectedIndexInput.value;
	if (rowIndex == oldValue)
	{
		selectedIndexInput.value = '';
	}
	else
	{
		selectedIndexInput.value = rowIndex;
	}

        var itemsTable = document.getElementById(tableId);
	    for (var i=0; i < itemsTable.rows.length; i++)
		itemsTable.rows[i].className = "unselectedRow";

	if (rowIndex != oldValue)
	{
		document.getElementById(rowId).className  = "selectedRow";
	}
}
//]]>
</script>

JSF page code to enable highlighting:

<ui:remove>Hidden input for storing selected row value</ui:remove>
<h:inputHidden id="itemSelectedRow"
	binding="#{backingBean.itemSelectedRowInput}"
	value="#{backingBean.itemSelectedRowIndex}" />

<t:dataTable id="itemTable"
	binding="#{backingBean.itemUIData}"
	style="background-color:white;"
	org.apache.myfaces.dataTable.ROW_STYLECLASS="#{backingBean.itemSelectedRowIndex
== rowIndex ? 'selectedRow' : 'unselectedRow'}"
	rowOnClick="colorizeRow('#{backingBean.itemUIDataClientId}',
'#{backingBean.itemSelectedRowInputClientId}', this.id,
'#{rowIndex}');"
	rowIndexVar="rowIndex"
	org.apache.myfaces.dataTable.ROW_ID="#{backingBean.itemUIDataClientId}:itemRow#{rowIndex}"
	value="#{backingBean.itemList}"
	var="item">


Backing bean code:

    private Integer itemSelectedRowIndex;

    transient private UIInput itemSelectedRowInput;
    transient private UIData itemUIData;

	/// Accessors

    public UIData getItemUIData() {
		return itemUIData;
	}

	public void setItemUIData(UIData sourceRoute) {
		this.itemUIData = sourceRoute;
	}

	public Integer getItemSelectedRowIndex() {
		return itemSelectedRowIndex;
	}

	public void setItemSelectedRowIndex(Integer itemSelectedRowIndex) {
		this.itemSelectedRowIndex = itemSelectedRowIndex;
	}

	public UIInput getItemSelectedRowInput() {
		return itemSelectedRowInput;
	}

	public void setItemSelectedRowInput(UIInput itemSelectedRowInput) {
		this.itemSelectedRowInput = itemSelectedRowInput;
	}

    /// Derived accessors

	private String getUIDataClientId(UIData uiData) {
		// Must unset current row index to get raw table id.
		int savedRowIndex = uiData.getRowIndex();
		uiData.setRowIndex(-1);
		
		String clientId = uiData.getClientId(FacesContext.getCurrentInstance());

		uiData.setRowIndex(savedRowIndex);
		
		return clientId;
	}

	public String getItemUIDataClientId()
	{
		return getUIDataClientId(itemUIData);
	}

	public String getItemSelectedRowInputClientId() {
		return itemSelectedRowInput.getClientId(FacesContext.getCurrentInstance());
	}