Changing rich faces extendeddatatable height from a command button Click

I am new to RichFaces and Facelets. I am trying to increase the height of an ExtendedDataTable defined in my project. I have a command button in the xhtml called "Expand". When I click on "Expand" I want the height of the Extended Data Table to change (say for example from 200px to 700px). Is this possible? If so how can it be done? Suggestions would be appreciated!!

I am using richfaces-3.3.3.

Here is the Facelets page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title>RichFaces</title>
</head>
<body>
<rich:panel id="searchResultsPanel" header="Search Results Panel" bodyClass="no-padding">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td colspan="2"><rich:extendedDataTable var="result" enableContextMenu="true" height="200px" width="935px" cellspacing="0" cellpadding="0" id="partsSearchResultsTable" rows="4" selectionMode="none">
<rich:column sortable="false" width="50">
<f:facet name="header">
Source
</f:facet>
<h:outputText value="TestColumn1" />
</rich:column>
<rich:column sortable="false" width="125">
<f:facet name="header">
Part Number
</f:facet>
<h:outputText value="TestColumn2" />
</rich:column>
<rich:column sortable="false" width="225">
<f:facet name="header">
Part Description
</f:facet>
<h:outputText value="TestColumn3" />
</rich:column>
<rich:column sortable="false" width="100">
<f:facet name="header">
HTS
</f:facet>
<h:outputText value="TestColumn4" />
</rich:column>
<rich:column sortable="false" width="65">
<f:facet name="header">
Priority
</f:facet>
<h:outputText value="TestColumn5" />
</rich:column>
<rich:column sortable="false" width="65" style="text-align: center;">
<f:facet name="header">
Flags
</f:facet>
<h:outputText value="TestColumn6" />
</rich:column>
<rich:column sortable="false" width="65">
<f:facet name="header">
Status
</f:facet>
<h:outputText value="TestColumn7" />
</rich:column>
<rich:column sortable="false" width="95">
<f:facet name="header">
Update Date
</f:facet>
<h:outputText value="TestColumn8" />
</rich:column>
<rich:column sortable="false" width="75">
<f:facet name="header">
User  Id
</f:facet>
<h:outputText value="TestColumn9" />
</rich:column>
<rich:datascroller id="datascroller" for="partsSearchResultsTable" selectedStyle="font-weight:bold" />
</rich:extendedDataTable></td>
</tr>
<tr>
<td align="center"><h:panelGroup id="resultListButtonGroup">
<a4j:commandButton value="Remove" styleClass="button" />
<h:commandButton id="archiveOrActivateBtn" value="Archive" styleClass="button" style="margin-left: 10px; margin-right: 10px;" />
<h:commandButton id="psExportBtn" value="Export Selected" styleClass="long-btn" />
<h:commandButton id="psExportXnumBtn" value="Export 15,000" styleClass="long-btn" style="margin-left: 10px;" />
<a4j:commandButton value="Expand" styleClass="button" style="margin-left: 10px;" />
</h:panelGroup></td>
</tr>
</table>
</rich:panel>
</body>
</html>

Solution

You can simply keep the height in a variable, then update it and rerender the table.

It can also be done through JavaScript, like this:

<h:outputScript>
    expandTable = function (height) {
        var edt = #{rich:component('table')},
            div = edt.mainDiv,
            body = edt.scrollingTable,
            divHeight = div.getHeight() + height,
            bodyHeight = body.getHeight() + height;

            table.setHeight(tableHeight);
            body.setHeight(bodyHeight);
        }        
</h:outputScript>

But this may not always work (i.e. some features of the datable may still work with the old values).