ExtendedDataTable show horizontal scrollbar
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 :
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>