Javascript error HtmlExtendedDataTable
I have created a custom component which consists out of a HtmlExtendedDataTable in a HtmlModalPanel. The HtmlModalPanel is shown when a certain buton is pressed. The table has a footer with a Ok and Cancel button. The problem arises when I use a org.richfaces.component.html.HtmlColumn in the table (which I do need) and the Ok or Cancel button is pressed which hides the HtmlModalPanel. This action creates a javascript error in IE7: Illegal argument, line 23. When I use the Microsoft Script Editor it highlights the following line in extended-data-table.js: c[c.length-2].width-=(totalWidth-maxWidth). The error causes a suggestionbox on my page to not fire the suggestion action again. My component looks like this:
// create extendeddatatable which holds the code list <rich:extendedDataTable>
HtmlExtendedDataTable extendedDataTable = new HtmlExtendedDataTable();
extendedDataTable.setValueExpression("value", ExpressionUtils.createValueExpression(context, ExpressionUtils
.getExpressionName("#{extendedTableBean.getCodeTableDataModel('" + entityName + "')}", null),
ExtendedTableDataModel.class));
extendedDataTable.setValueExpression("selection", ExpressionUtils.createValueExpression(context, ExpressionUtils
.getExpressionName("#{extendedTableBean.codeSelection}", null), Selection.class));
extendedDataTable.setVar(CODE);
extendedDataTable.setSelectionMode(EXTDATATABLE_SELECTIONMODE);
extendedDataTable.setWidth(EXTDATATABLE_WIDTH);
extendedDataTable.setHeight(EXTDATATABLE_HEIGHT);
extendedDataTable.setId(id + "Table");
// create code column for the extendeddatatable <rich:column>
org.richfaces.component.html.HtmlColumn codeColumn = new org.richfaces.component.html.HtmlColumn();
codeColumn.setId(id + "TableCode");
codeColumn.setValueExpression("sortBy", ExpressionUtils.createValueExpression(context, ExpressionUtils
.getExpressionName("#{code.code}", null), String.class));
codeColumn.setValueExpression("filterBy", ExpressionUtils.createValueExpression(context, ExpressionUtils
.getExpressionName("#{code.code}", null), String.class));
codeColumn.setFilterEvent("onkeyup");
codeColumn.setWidth(EXTDATATABLE_CODE_WIDTH);
codeColumn.setLabel(EXTDATATABLE_CODE_LABEL);
HtmlOutputText outputTextCode = new HtmlOutputText();
outputTextCode.setValue(EXTDATATABLE_CODE_LABEL);
codeColumn.getFacets().put("header", outputTextCode);
HtmlOutputText outputCode = new HtmlOutputText();
outputCode.setValueExpression("value", ExpressionUtils.createValueExpression(context, ExpressionUtils
.getExpressionName("#{code.code}", null), String.class));
codeColumn.getChildren().add(outputCode);
extendedDataTable.getChildren().add(codeColumn);
// create cancel and ok buttons <h:panelGroup>
HtmlPanelGroup panelGroupButtons = new HtmlPanelGroup();
HtmlCommandButton cancelButton = new HtmlCommandButton();
cancelButton.setValue(CANCELBUTTON_TEXT);
cancelButton.setStyle("float: right;");
cancelButton.setOnclick("Richfaces.hideModalPanel('" + id + "ModalPanel');return false;");
panelGroupButtons.getChildren().add(cancelButton);
HtmlCommandButton confirmButton = new HtmlCommandButton();
confirmButton.setValue(OKBUTTON_TEXT);
confirmButton.setStyle("float: right;");
confirmButton.setOnclick("Richfaces.hideModalPanel('" + id + "ModalPanel');" + id
+ "ConfirmSelection();return false;");
panelGroupButtons.getChildren().add(confirmButton);
extendedDataTable.getFacets().put("footer", panelGroupButtons);
// create the form <a4j:form>
AjaxForm form = new AjaxForm();
form.getChildren().add(extendedDataTable);
// create queue component to work around concurrent call to conversation errors <a4j:queue>
HtmlQueue queue = new HtmlQueue();
queue.setIgnoreDupResponses(true);
queue.setRequestDelay(200);
form.getChildren().add(queue);
// create the function which invokes a method after the ok button is pressed <a4j:jsFunction>
HtmlAjaxFunction ajaxFunction = new HtmlAjaxFunction();
ajaxFunction.setId("a4jfunction");
ajaxFunction.setReRender(inputCodeId + "," + outputDescriptionId);
ajaxFunction.setName(id + "ConfirmSelection");
ajaxFunction.setActionExpression(new ConfirmSelectionMethodExpression(this));
form.getChildren().add(ajaxFunction);
// create the actual popup modalpanel <rich:modalPanel>
HtmlModalPanel modalPanel = new HtmlModalPanel();
modalPanel.setId(id + "ModalPanel");
modalPanel.setWidth(MODALPANEL_WIDTH);
modalPanel.setHeight(MODALPANEL_HEIGHT);
// create the title of the popup modalpanel <h:panelGroup> and <h:outputText>
HtmlPanelGroup panelGroupName = new HtmlPanelGroup();
HtmlOutputText outputName = new HtmlOutputText();
String name = (String) getAttributes().get("name");
outputName.setValue(name);
panelGroupName.getChildren().add(outputName);
modalPanel.getFacets().put("header", panelGroupName);
modalPanel.getChildren().add(form);
