Hi I would like implement a editable table with both horizontal and vertical scroll bars so i chosen extended table in rich faces and want to edit the data in this table so i chosen the in-place input and in-place select , works good if i have less than 30 rows, if i have more rows say 600 rows.....it is dead slow to render the page
with out in-place selects just i tried display it works so nice so the reason i thought is the following because , each row has 6 in-place selects so it is too slow because it needs to load 600*6 =3600 select drop downs and for each drop down it is going to modal class to get the pick list for each drop down.
these 6 drop downs are repeated in each row of these 600 rows....so is there any way to improve performance and use this solution or is there any good solution for this one ?
Is there any way store the drop down options in one variable on rich faces client side and re use on the same page?
<!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:t="http://myfaces.apache.org/tomahawk"
xmlns:rich="http://richfaces.org/rich"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:a4j="http://richfaces.org/a4j"
>
<ui:composition template="/WEB-INF/layout/baseLayoutJs.xhtml">
<rich:messages layout="list" showDetail="true" showSummary="true"
style="color:darkred">
<f:facet name="errorMarker">
<h:graphicImage value="/images/error.gif" />
</f:facet>
<f:facet name="infoMarker">
<h:graphicImage value="/images/passed.gif" />
</f:facet>
</rich:messages>
<ui:define name="content">
<h:form>
<rich:panel style="width:800px">
<f:facet name="header">
<h:panelGrid id="grid0" columns="4" style="width:800px;">
<h:outputLabel for="s1212" styleClass="formLabelswidth25"
value="Scheme Editor Home" />
</h:panelGrid>
</f:facet>
<rich:messages layout="list" rendered="true" showDetail="true"
showSummary="true" passedLabel="Trying to Save." style="color:red">
<f:facet name="errorMarker">
<h:graphicImage value="/images/error.gif" />
</f:facet>
<f:facet name="passedMarker">
<h:graphicImage value="/images/passed.gif" />
</f:facet>
</rich:messages>
<h:panelGrid columns="8" bgcolor="#BED6F8" style="height:30px;" width="780">
<h:commandButton action="#{schemeWebEditorHomeHandler.saveScheme}" value="Save" style="height:20px;width:60px;"/>
<h:commandButton action="#{schemeWebEditorHomeHandler.addNewSchemeRow}" value="New Row" style="height:20px;width:10x;"/>
<h:commandButton action="#" value="Clear Row" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Delete Row" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Update Trays" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Search" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Copy" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Help" style="height:20px;width:100px;"/>
</h:panelGrid>
<t:div style=" height : 10px;"></t:div>
<h:panelGrid id="searchData" style="width=780px;">
<rich:extendedDataTable id="data" var="list"
preserveDataModel="false" preserveSort="true" bgcolor="#BED6F8" style="height:300px; width:780px;"
frozenColumns="3"
selection="#{schemeWebEditorHomeHandler.selection}" selectionMode="multiple"
value="#{schemeWebEditorHomeHandler.sortSchemeRowList}" width="780" rowKeyVar="row">
<rich:column align="left" width="130px" >
<f:facet name="header">
<h:panelGroup width="130px" layout="block">
<script type="text/javascript">
//<![CDATA[
function checkAllCheckboxesInTable( inputId, state ){
var commonIdPart = inputId.substr(0, inputId.lastIndexOf(':'));
var tableId = commonIdPart ;
var tableElement = document.getElementById( tableId );
var inputs = tableElement.getElementsByTagName('input');
for (var i = 0; i <= inputs.length; i++){
var input = inputs[i];
if( input.getAttribute('type') == 'checkbox' && state){
input.setAttribute('checked', state);
}else{
input.removeAttribute('checked');
}
}
}
//]]>
</script>
<h:selectBooleanCheckbox id="checkAll" title="#{bundle.CHECK_ALL}" onclick="checkAllCheckboxesInTable( this.id, this.checked );">
<a4j:ajax event="change" reRender="data"/>
</h:selectBooleanCheckbox>
<h:outputText value=" SELECT ALL" styleClass="formLabelswidth29" />
</h:panelGroup>
</f:facet>
<h:selectBooleanCheckbox align="left" id="checkEntry" value="#{list.selected}" disabled="false"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Start Bin" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceInput layout="block" value="#{list.startBin}"
converterMessage="Start Bin value should be integer. Start Bin at row #{row+1} can't be changed."
id="inplace" required="true"
requiredMessage="Start Bin at row #{row+1} wasn't filled. Value can't be changed."
changedHoverClass="hover" viewHoverClass="hover"
viewClass="inplace" changedClass="inplace" style="border-style:none;"
selectOnEdit="true" >
</rich:inplaceInput>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="End Bin" styleClass="formLabelswidth29"/>
</f:facet>
<rich:inplaceInput layout="block" value="#{list.endBin}"
converterMessage="End Bin value should be integer. End Bin at row #{row+1} can't be changed."
id="inplace2" required="true"
requiredMessage=" End Bin at row #{row+1} wasn't filled. Value can't be changed."
changedHoverClass="hover" viewHoverClass="hover"
viewClass="inplace" changedClass="inplace" style="border-style:none;"
selectOnEdit="true" >
</rich:inplaceInput>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bin Switch" styleClass="formLabelswidth29"/>
</f:facet>
<rich:inplaceSelect value="#{list.binSwitch}" style="border-style:none;" selectItemClass="SelectItem" >
<f:selectItems value="#{schemeWebEditorHomeHandler.binSwitchTypeList}" />
</rich:inplaceSelect>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bin Type" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceSelect value="#{list.binTypeId}" style="border-style:none;" selectItemClass="SelectItem" >
<f:selectItems value="#{schemeWebEditorHomeHandler.binTypeList}" />
</rich:inplaceSelect>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Qual Level" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceSelect value="#{list.quailificationLevelId}" style="border-style:none;" selectItemClass="SelectItem" >
<f:selectItems value="#{schemeWebEditorHomeHandler.sortLevelTypeList}" />
</rich:inplaceSelect>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Auto/Mach" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceSelect value="#{list.autoMachinableId}" style="border-style:none;" selectItemClass="SelectItem" >
<f:selectItems value="#{schemeWebEditorHomeHandler.autoMachTypeList}" />
</rich:inplaceSelect>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Zip Range" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceInput value="#{list.rangeValue}"
converterMessage="Zip Range value should be integer. Zip Range at row #{row+1} can't be changed."
id="inplace3" required="false"
requiredMessage="Zip Range at row #{row+1} wasn't filled. Value can't be changed."
selectOnEdit="true" style="p {display:block};border-style:none;" >
</rich:inplaceInput>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bin Line 1" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceInput layout="block" value="#{list.binLine1}"
converterMessage="Bin Line 1 value should be integer. Bin Line 1 at row #{row+1} can't be changed."
id="inplace4"
requiredMessage="Bin Line 1 at row #{row+1} wasn't filled. Value can't be changed."
changedHoverClass="hover" viewHoverClass="hover"
viewClass="inplace" changedClass="inplace" style="border-style:none;"
selectOnEdit="true" minInputWidth="180px" >
<f:validateLength minimum="0" maximum="5" />
</rich:inplaceInput>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bin Line 2" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceInput layout="block" value="#{list.binLine2}"
converterMessage="Bin Line 2 value should be integer. Bin Line 2 at row #{row+1} can't be changed."
id="inplace5"
requiredMessage="Bin Line 2 at row #{row+1} wasn't filled. Value can't be changed."
changedHoverClass="hover" viewHoverClass="hover"
viewClass="inplace" changedClass="inplace" style="border-style:none;"
selectOnEdit="true" >
</rich:inplaceInput>
</rich:column>
</rich:extendedDataTable>
</h:panelGrid>
</rich:panel>
<t:saveState value="#{schemeWebEditorHomeHandler.selectedSchemeId}"></t:saveState>
<t:saveState value="#{schemeWebEditorHomeHandler.sortSchemeRowList}"></t:saveState>
<t:saveState value="#{schemeWebEditorHomeHandler.fromAddNewRow}"></t:saveState>
</h:form>
</ui:define>
</ui:composition>
</html>
here is my bean
new code
@ManagedBean
@ViewScoped
public class SchemeWebEditorHomeHandler extends BaseHandler implements
Serializable {
private static final long serialVersionUID = -1172151714140365016L;
private static final Log log = LogFactory.getLog(SchemeWebEditorHomeHandler.class);
private List<SortSchemeRow> sortSchemeRowList;
List<SelectItem> binSwitchTypeList;
boolean fromAddNewRow = false;
List<SelectItem> binTypeList;
List<SelectItem> autoMachTypeList;
List<SelectItem> sortLevelTypeList;
List<SelectItem> planetCodeTypeList;
List<SelectItem> subMailTypeList;
List<SelectItem> trayLabelTypeList;
List<SelectItem> msMailTypeList;
List<SelectItem> trayBandingTypeList;
private Collection<Object> selection;
private int selectedSchemeId;
public SchemeWebEditorHomeHandler() throws BaajaException {
binSwitchTypeList = new ArrayList<SelectItem>();
binSwitchTypeList.add(new SelectItem(1, "ON"));
binSwitchTypeList.add(new SelectItem(2, "OF"));
SchemeExpertService schemeExpert = (SchemeExpertService) ServiceLocator
.getServiceWithName(SchemeExpertService.class.getName());
// binTypeList fetch
if (this.binTypeList == null || this.binTypeList.size() <= 0) {
Collection machBinTypeList = schemeExpert.getMachBinTypes();
this.binTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = machBinTypeList.iterator(); iterator
.hasNext();) {
MachSchemeBinType machSchemeBinType = (MachSchemeBinType) iterator
.next();
this.binTypeList.add(new SelectItem(machSchemeBinType
.getSchemeBinTypeId(), machSchemeBinType
.getDisplayDescription()));
}
}
if (this.autoMachTypeList == null || this.autoMachTypeList.size() <= 0) {
Collection dbAutoMAchTypeList = schemeExpert
.getAutoMachinableTypes();
this.autoMachTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbAutoMAchTypeList.iterator(); iterator
.hasNext();) {
CoreAutoMachLite coreAutoMachLite = (CoreAutoMachLite) iterator
.next();
this.autoMachTypeList.add(new SelectItem(coreAutoMachLite
.getAutoMachId(), coreAutoMachLite.getDescription()));
}
}
if (this.sortLevelTypeList == null
|| this.sortLevelTypeList.size() <= 0) {
Collection dbSortLevelTypeList = schemeExpert
.getQualificationLevels();
this.sortLevelTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbSortLevelTypeList.iterator(); iterator
.hasNext();) {
CoreSortLevelLite coreSortLevelLite = (CoreSortLevelLite) iterator
.next();
this.sortLevelTypeList.add(new SelectItem(coreSortLevelLite
.getSortLevelId(), coreSortLevelLite.getDescription()));
}
}
planetCodeTypeList = new ArrayList<SelectItem>();
planetCodeTypeList.add(new SelectItem(true, "ON"));
planetCodeTypeList.add(new SelectItem(false, "OF"));
if (this.subMailTypeList == null || this.subMailTypeList.size() <= 0) {
Collection dbSubMailTypeList = schemeExpert.getSubMailingTypes();
this.subMailTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbSubMailTypeList.iterator(); iterator
.hasNext();) {
MachSubmailTypeLite machSubmailTypeLite = (MachSubmailTypeLite) iterator
.next();
this.subMailTypeList.add(new SelectItem(machSubmailTypeLite
.getSubmailTypeId(), machSubmailTypeLite
.getDescription()));
}
}
if (this.msMailTypeList == null || this.msMailTypeList.size() <= 0) {
Collection dbmsMailTypeList = schemeExpert.getMsMailingTypes();
this.msMailTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbmsMailTypeList.iterator(); iterator
.hasNext();) {
MsMailTypeLite msMailTypeLite = (MsMailTypeLite) iterator
.next();
this.msMailTypeList.add(new SelectItem(msMailTypeLite
.getMsMailTypeId(), msMailTypeLite.getDescription()));
}
}
trayBandingTypeList = new ArrayList<SelectItem>();
trayBandingTypeList.add(new SelectItem(true, "ON"));
trayBandingTypeList.add(new SelectItem(false, "OF"));
if (this.trayLabelTypeList == null
|| this.trayLabelTypeList.size() <= 0) {
Collection dbtrayLabelTypeList = schemeExpert
.getTraySubMailingTypes();
this.trayLabelTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbtrayLabelTypeList.iterator(); iterator
.hasNext();) {
LogTrayTagTypeLite logTrayTagTypeLite = (LogTrayTagTypeLite) iterator
.next();
this.trayLabelTypeList.add(new SelectItem(logTrayTagTypeLite
.getTrayTagTypeId(), logTrayTagTypeLite
.getDescription()));
}
}
log.info("Constrctor ...........");
}
public String viewScheme() throws BaajaException {
SchemeExpertService schemeExpert = (SchemeExpertService) ServiceLocator
.getServiceWithName(SchemeExpertService.class.getName());
HttpServletRequest req = getServletRequest();
int sorterSchemeId = this.selectedSchemeId;
if (req.getParameter("sorterSchemeId") != null
&& req.getParameter("sorterSchemeId").trim().length() > 0) {
sorterSchemeId = Integer.parseInt(req
.getParameter("sorterSchemeId"));
}
log.info("Parameter scheme Id :" + sorterSchemeId);
MachSorterSchemeLite sortScheme = schemeExpert
.getScheme(sorterSchemeId);
this.sortSchemeRowList = (List) SortSchemeUtility
.getSortSchemeRow(sortScheme.getMachSortSchemeGroups());
if (sortSchemeRowList.size() > 0) {
} else {
addErrorMessage("No matching records found for selected criteria");
}
return "view_SchemeWebHome_Screen";
}
public String saveScheme() throws BaajaException {
System.out.println("Hello inside save scheme");
// log.info("listSize5"+this.sortSchemeRowList.size());
// sortSchemeRowList= getSortSchemeRowList();
SchemeExpertService schemeExpert = (SchemeExpertService) ServiceLocator
.getServiceWithName(SchemeExpertService.class.getName());
MachSorterSchemeLite sortScheme = schemeExpert
.getScheme(this.selectedSchemeId);
schemeExpert.updateSchemeWithSorterSchemeGroup(sortScheme,
SortSchemeUtility.getSortSchemeGroups(
(Collection) this.sortSchemeRowList, sortScheme));
return viewScheme();
}
public String addNewSchemeRow() throws BaajaException {
log.info("listSize" + this.sortSchemeRowList.size());
SortSchemeRow sr = new SortSchemeRow();
sr.setSubMailingTypeId(1);
sr.setGroupSeparator("");
sr.setBinSwitch(1);
sr.setAutoMachinableId(1);
sr.setBinTypeId(1);
sr.setQuailificationLevelId(1);
this.sortSchemeRowList.add(sr);
// log.info(getSortSchemeRowList().size()+"listSize2"+this.sortSchemeRowList.size());
setFromAddNewRow(true);
return "view_SchemeWebHome_Screen";
}
public List<SortSchemeRow> getSortSchemeRowList() throws BaajaException {
SchemeExpertService schemeExpert = (SchemeExpertService) ServiceLocator
.getServiceWithName(SchemeExpertService.class.getName());
if (this.sortSchemeRowList == null || sortSchemeRowList.size() <= 0) {
if (!this.fromAddNewRow) {
HttpServletRequest req = getServletRequest();
if (req.getParameter("sorterSchemeId") != null) {
this.selectedSchemeId = Integer.parseInt(req
.getParameter("sorterSchemeId"));
}
log.info("Parameter scheme Id :" + this.selectedSchemeId);
MachSorterSchemeLite sortScheme = schemeExpert
.getScheme(this.selectedSchemeId);
sortSchemeRowList = (List) SortSchemeUtility
.getSortSchemeRow(sortScheme.getMachSortSchemeGroups());
}
}
if (sortSchemeRowList.size() > 0) {
return sortSchemeRowList;
} else {
addErrorMessage("No matching records found for selected criteria");
}
return sortSchemeRowList;
}
public void setSortSchemeRowList(List<SortSchemeRow> sortSchemeRowList) {
this.sortSchemeRowList = sortSchemeRowList;
}
public List<SelectItem> getBinSwitchTypeList() {
return binSwitchTypeList;
}
public boolean isFromAddNewRow() {
return fromAddNewRow;
}
public void setFromAddNewRow(boolean fromAddNewRow) {
this.fromAddNewRow = fromAddNewRow;
}
public List<SelectItem> getBinTypeList() throws BaajaException {
return binTypeList;
}
public List<SelectItem> getAutoMachTypeList() throws BaajaException {
log.info("autoMachTypeList ...........");
return autoMachTypeList;
}
public List<SelectItem> getSortLevelTypeList() throws BaajaException {
return sortLevelTypeList;
}
public List<SelectItem> getPlanetCodeTypeList() {
return planetCodeTypeList;
}
public List<SelectItem> getSubMailTypeList() throws BaajaException {
return subMailTypeList;
}
public List<SelectItem> getTrayLabelTypeList() throws BaajaException {
return trayLabelTypeList;
}
public List<SelectItem> getMsMailTypeList() throws BaajaException {
return msMailTypeList;
}
public List<SelectItem> getTrayBandingTypeList() {
return trayBandingTypeList;
}
public Collection<Object> getSelection() {
return selection;
}
public void setSelection(Collection<Object> selection) {
this.selection = selection;
}
public int getSelectedSchemeId() {
return selectedSchemeId;
}
public void setSelectedSchemeId(int selectedSchemeId) {
this.selectedSchemeId = selectedSchemeId;
}
}
