0 Replies Latest reply on Aug 18, 2010 7:49 AM by Flavio Palumbo

    ExtendedDataTable show horizontal scrollbar

    Flavio Palumbo Newbie

      hi all,

      i've seen the post at http://community.jboss.org/thread/146108 and try to follow it.

      I put the code found on the post 3. 29-dic-2009 3.31 in a script tag of the page where is the ExtendedDataTable but all i get is an exception.

      Well, my understanding of javascript is quite null, so i cannot figure out how to fix it.

      Any hint would be appreciated.

      Flavio

       

      here the exception :

      Error Parsing /tables/eSBank/ESBankListPanel.xhtml: Error Traced[line: 11] The entity name must immediately follow the '&' in the entity reference.

       

      here is the 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:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:a4j="http://richfaces.org/a4j"
            xmlns:rich="http://richfaces.org/rich">
          <script type="text/javascript">

      ExtendedDataTable.DataTable.header.prototype.OnSepMouseMove = function(event) {
                if(this.dragColumnInfo && this.dragColumnInfo.mouseDown) {
                     if(!this.dragColumnInfo.dragStarted) {
                          this.dragColumnInfo.dragStarted = true;
                          this._showSplitter(this.dragColumnInfo.srcElement.columnIndex);
                     }
                     var delta = Event.pointerX(event) -
                          this.dragColumnInfo.startX
                     if (delta < this.minDelta) {
                          delta = this.minDelta;
                     }
                     var x = this.dragColumnInfo.originalX + delta;
                     var finalX = x - this.minColumnWidth - 6 //6 stands for sep span width;
                     this.columnSplitter.moveToX(finalX);
                     Event.stop(event);
                }
           }

           ExtendedDataTable.DataTable.header.prototype.OnSepMouseUp = function(event) {
                Event.stop(event);
                Event.stopObserving(document, 'mousemove', this.eventSepMouseMove);
                Event.stopObserving(document, 'mouseup', this.eventSepMouseUp);
                if(this.dragColumnInfo && this.dragColumnInfo.dragStarted) {

                     this.dragColumnInfo.dragStarted = false;
                     this.dragColumnInfo.mouseDown = false;

                     var delta = Event.pointerX(event) -
                          this.dragColumnInfo.startX;
                     if (delta < this.minDelta) {
                          delta = this.minDelta;
                     }
                     var columnIndex = this.dragColumnInfo.srcElement.columnIndex;
                     var newWidth = this.getColumnWidth(columnIndex) + delta;

                     this.extDt.setColumnWidth(columnIndex, newWidth);
                     this.setColumnWidth(columnIndex,newWidth);
                     this.extDt.updateLayout();
                     if (this.extDt.onColumnResize){
                          //set properly value to this.columnWidths
                          this.extDt.columnWidths = "";
                          for (i=0; i<this.columnsNumber; i++){
                               this.extDt.columnWidths += "" + this.getColumnWidth(i) + ";";
                          }//for
                          this.extDt.onColumnResize(event, this.extDt.columnWidths);
                     }
                }
                this._hideSplitter();
           }
          </script>
         
          <ui:composition>
              <h:form id="ESBankform">
                  <rich:panel header="#{mess.bankTitleList}" headerClass="panel-header-class">
                      <rich:extendedDataTable
                          value="#{eSBank.dataModel}" var="item" id="ESBankTable"
                          width="850px" height="400px"
                          sortMode="#{eSBank.sortMode}"
                          selectionMode="#{eSBank.selectionMode}"
                          tableState="#{eSBank.tableState}"
                          selection="#{eSBank.selection}">

                          <rich:column sortable="true" sortBy="#{item.a1id}" label="a1id"
                                       id="a1id_col" width="40px">
                              <f:facet name="header">
                                  <h:outputText value="#{mess.labelBankId}" id="a1id_hea"/>
                              </f:facet>
                              <h:outputText value="#{item.a1id}" id="a1id_fld" style="text-align: right"/>
                          </rich:column>
                          <rich:column sortable="true" sortBy="#{item.a1cdba}" id="a1cdba_col"
                                       filterBy="#{item.a1cdba}" filterEvent="onkeyup" width="120px"
                                       label="a1cdba">
                              <f:facet name="header">
                                  <h:outputText value="#{mess.labelBankCod}" id="a1cdba_hea"/>
                              </f:facet>
                              <h:outputText value="#{item.a1cdba}" id="a1cdba_fld"/>
                          </rich:column>
                          <rich:column sortable="true" sortBy="#{item.a1deba}" id="a1deba_col"
                                       filterBy="#{item.a1deba}" filterEvent="onkeyup" width="250px"
                                       label="a1deba">
                              <f:facet name="header">
                                  <h:outputText value="#{mess.labelBankDes}" id="a1deba_hea"/>
                              </f:facet>
                              <h:outputText value="#{item.a1deba}" id="a1deba_fld"/>
                          </rich:column>
                          <rich:column sortable="false" label="a1cdso" id="a1cdso_col" width="100px">
                              <f:facet name="header">
                                  <h:outputText value="#{mess.labelBankSoc}" id="a1cdso_hea"/>
                              </f:facet>
                              <h:outputText value="#{item.a1cdso}" id="a1cdso_fld"/>
                          </rich:column>
                          <rich:column sortable="false" label="a1user" id="a1user_col" width="100px">
                              <f:facet name="header">
                                  <h:outputText value="#{mess.labelUser}" id="a1user_hea"/>
                              </f:facet>
                              <h:outputText value="#{item.a1user}" id="a1user_fld"/>
                          </rich:column>
                          <rich:column sortable="false" label="a1usva" id="a1usva_col" width="100px">
                              <f:facet name="header">
                                  <h:outputText value="#{mess.labelUserVar}" id="a1usva_hea"/>
                              </f:facet>
                              <h:outputText value="#{item.a1usva}" id="a1usva_fld"/>
                          </rich:column>
                          <rich:column sortable="false" label="a1dtva" id="a1dtva_col" width="140px">
                              <f:facet name="header">
                                  <h:outputText value="#{mess.labelDataVar}" id="a1dtva_hea"/>
                              </f:facet>
                              <h:outputText value="#{item.a1dtva}" id="a1dtva_fld">
                                  <f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss" />
                              </h:outputText>
                          </rich:column>

                          <a4j:support reRender="selectiontable" id="extended_table_bean_take_selection"
                                       action="#{eSBank.takeSelection}"
                                       event="onselectionchange" />
                      </rich:extendedDataTable>
                      <rich:panel>
                          <a4j:commandLink reRender="ESBankEditPanel"  ajaxSingle="true"
                                           action="#{eSBank.editSetup}"
                                           oncomplete="javascript:Richfaces.showModalPanel('ESBankEditPanel');" >
                              <h:graphicImage url="/resources/images/nuovo.png" title="#{mess.tipEdit}"/>
                              <f:setPropertyActionListener value="I" target="#{eSBank.curFunc}" />
                          </a4j:commandLink>
                          <a4j:commandLink reRender="ESBankEditPanel"  ajaxSingle="true"
                                           action="#{eSBank.editSetup}"
                                           oncomplete="if (!ajaxRequestContainsErrors()) #{rich:component('ESBankEditPanel')}.show();" >
                              <h:graphicImage url="/resources/images/edit.png" title="#{mess.tipEdit}"/>
                              <f:setPropertyActionListener value="M" target="#{eSBank.curFunc}" />
                          </a4j:commandLink>
                          <a4j:commandLink reRender="ESBankTableDel"  ajaxSingle="true"
                                           action="#{eSBank.editSetup}"
                                           oncomplete="if (!ajaxRequestContainsErrors()) #{rich:component('ESBankDeletePanel')}.show();" >
                              <h:graphicImage url="/resources/images/delete.png" title="#{mess.tipDelete}"/>
                              <f:setPropertyActionListener value="D" target="#{eSBank.curFunc}" />
                          </a4j:commandLink>
                      </rich:panel>
                      <rich:spacer height="10" width="100" style="display: block"/>
                      <rich:messages id="ESBankTableErr" infoClass="msg-info-class" errorClass="msg-err-class" layout="list"></rich:messages>
                  </rich:panel>
              </h:form>
              <ui:include src="/tables/eSBank/ESBankDelete.xhtml"/>
              <ui:include src="/tables/eSBank/ESBankEdit.xhtml"/>
          </ui:composition>
      </html>