JSF(1.2) DataTable edit row with button click

Question

Possible Duplicate:
Make editable rows in Datatable

Folks,

In the below table I would like to edit the rows.

When I click the edit button, the screen will look like this, editable fields

and when I click save button the list should be updated with the new values for the same row. Say for example, I change the row to 2000, Micky, 4500.

How can I achieve this ?

I tried the below logic, but it is not working, please help me out.

  <h:dataTable binding="#{myBean.dataTable}" id="beanTable" value="#{myBean.dataList}" var="dataItem" styleClass="dataTableEx" headerClass="headerClass"
                columnClasses="columnClass1" rowClasses="rowClass1,rowClass2" border="1"  cellpadding="2" cellspacing="0" >

<h:column>
    <f:facet name="header">
        <h:outputText value="Save" />
    </f:facet>
    <h:commandButton value="Save" actionListener="#{myBean.saveAction}"  />     
</h:column>

<h:column>
    <f:facet name="header">
        <h:outputText value="Edit" />
    </f:facet>
    <h:commandButton id="edit"  value="Edit" actionListener="#{myBean.editAction}"  />      
</h:column>


public void editAction(ActionEvent e){
        MyData data = (MyData)dataTable.getRowData();
        data.setEditable(true);
    }


// saveAction is not working.   
    public void saveAction(ActionEvent e){
        int index = dataTable.getRowIndex();
        MyData data = (MyData)dataTable.getRowData(); // returns old value not the newly edited values.
        dataList.remove(index); // dataList has the bean objects
        dataList.add(index, data); 
    }