Primefaces datatable not getting update with Edited values after using rendered in JSF

Question

I am setting rendered attribute of a datatable in primefaces to true when a command button is clicked. The datatable is Editable and is wrapped inside a panel.

Rendered is working properly When i am clicking on command button the table is getting displayed, values are getting Edited but table is not holding new Edited values .

The function which is written in p:ajax tag is not getting called I think. Please somebody help...

I have googled and found that to use Ajax, the UI should always be rendered but my requirement is to hide the table initially.

P.S : When renedred is removed from table everything works fine. Thanks in advance.

below is my code

<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
  <p:commandButton value="Enter" update="panel1" icon="ui-icon-check"  actionListener="#{step1Bean.onClick}"/>

 <h:panelGrid id="panel1" columns="1" cellpadding="5">

  <p:dataTable id="pan1tab1" rendered="#{step1Bean.showPanel1}" var="car" value="#{dtEditView.cars2}" editable="true" editMode="cell"    widgetVar="cellCars" tableStyle="width:43%">

  <p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}"  update=":form:msgs"  />

   <p:column headerText="Id" id="col1">

          <p:cellEditor>
              <f:facet name="output"><h:outputText value="#{car.prodLine}"  /></f:facet>
              <f:facet name="input"><p:inputText id="modelInput" value="#{car.prodLine}" style="width:96%"/>
              </f:facet>
          </p:cellEditor>
      </p:column>

    <p:column headerText="1" id="col2">
       <p:cellEditor>
           <f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
           <f:facet name="input">
               <h:selectOneMenu value="#{car.brand}" style="width:100%">
                   <f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
               </h:selectOneMenu>
           </f:facet>
       </p:cellEditor>
   </p:column>

  <p:column headerText="2" id="col3">
       <p:cellEditor>
           <f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
           <f:facet name="input">
               <h:selectOneMenu value="#{car.color}" style="width:100%">
                   <f:selectItems value="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
               </h:selectOneMenu>
           </f:facet>
       </p:cellEditor>
   </p:column>
   </p:dataTable>

   </h:panelGrid>
    </h:form>


    Bean Class:
    @ManagedBean(name="step1Bean")
    public class CalendarView {
    public Boolean showPanel1=false;

    public Boolean getShowPanel1() {
    return showPanel1;
     }

    public void setShowPanel1(Boolean showPanel1) {
    this.showPanel1 = showPanel1;
     }

     public void onClick(ActionEvent actionEvent) {

     this.setShowPanel1(true);
      }
      }


      Ajax Event:

       public void onCellEdit(CellEditEvent event) {
       Object oldValue = event.getOldValue();
       Object newValue = event.getNewValue();

       if(newValue != null && !newValue.equals(oldValue)) {
        FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,"Cell Changed", "Old: " + oldValue + ", New:" + newValue+" rowind-"+t1+" col : "+t2);

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }