JSF 1.2 dataTable Issue - ajax

I have a requirement like " On selection of catalog, I would like to fetch the data from database. One of catalog is having very huge data like (25000 and above records. To get these records from db and display in fronted I am using JSF dataTable tag". As mentioned below. But this is taking more and more time. Some times page is also getting timed out. can any body help me.
enter code here
<h:column>
<f:facet name="header">
<h:outputText value="Sr.No." />
</f:facet>``
<h:outputText value=" #{PromoCodeDefinitionBean.table.rowIndex+1}" styleClass="blackboldSmall" />
</h:column>
<h:column rendered="#{PromoCodeDefinitionBean.except}">
<f:facet name="header">
<h:selectOneMenu id="useCountAll" onchange="changeValue();">
<h:outputText value="Use Count " />
<f:selectItem itemLabel="Count" itemValue=""/>
<f:selectItem itemLabel="1" itemValue="1"/>
<f:selectItem itemLabel="2" itemValue="2"/>
<f:selectItem itemLabel="3" itemValue="3"/>
<f:selectItem itemLabel="4" itemValue="4"/>
<f:selectItem itemLabel="5" itemValue="5"/>
</h:selectOneMenu>
</f:facet>
<h:inputText id="useCount" binding="#{PromoCodeDefinitionBean.userCount}" value="#{output.checkvalue}" size="2" styleClass="mandFieldClass"></h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="User Name" />
</f:facet>
<h:outputText value=" #{output.userName}" styleClass="blackboldSmall" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Email" />
</f:facet>
<h:outputText value=" #{output.emailId}" styleClass="blackboldSmall" />
<h:inputHidden id="emailId" binding="#{PromoCodeDefinitionBean.email}" value="#{output.emailId}"></h:inputHidden>
</h:column>
<h:column rendered="#{PromoCodeDefinitionBean.except}">
<f:facet name="header">
<h:selectBooleanCheckbox id="BulkMovementAll" onclick="checkUncheckAll();" ><h:outputText value="Select All " />
<br></h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox binding="#{PromoCodeDefinitionBean.checkedSelectedUser}" value="#{output.ischecked}" id="BulkMovement" onclick="test1(this.id)" />
<h:outputText id="checkboxvalue1" value="#{output.ischecked}" style="display: none; text-align:center;" />
</h:column>
</h:dataTable>
Please help me to improve my displaying logic.
Thanks in advance.

You can use Paginator & only fetch few records(e.g 10 rows) at a time & give user option to scroll over the pages.

Related

Richfaces DataTable: Filtering and retaining new input

I'm following the jboss guide "Table Filtering" and implemented the example successfully. Then i added a new checkbox field that a user can set. When i use the filter the checkbox is resetted. Is there a way to retain the state of the checkbox?
<rich:dataTable value="#{capitalsBean.capitals}" var="cap" id="table">
<f:facet name="header">
<rich:columnGroup>
<rich:column>
<h:outputText value="State Name" />
</rich:column>
<rich:column>
<h:outputText value="State Time Zone" />
</rich:column>
<rich:column>
<h:outputText value="Marked" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column filter="#{filteringBean.stateFilter}">
<f:facet name="header">
<h:inputText value="#{filteringBean.stateFilterValue}" id="input">
<a4j:ajax event="keyup" render="table#body">
<a4j:attachQueue requestDelay="700"
ignoreDupResponses="true" />
</a4j:ajax>
</h:inputText>
</f:facet>
<h:outputText value="#{cap.state}" />
</rich:column>
<rich:column filterExpression="#{fn:containsIgnoreCase(cap.timeZone, filteringBean.zoneFilterValue)}">
<f:facet name="header">
<h:selectOneMenu value="#{filteringBean.zoneFilterValue}">
<f:selectItems value="#{filteringBean.zoneList}" />
<a4j:ajax event="change" render="table#body" />
</h:selectOneMenu>
</f:facet>
<h:outputText value="#{cap.timeZone}" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox value="#{filteringBean.marked}" disabled="false"/>
</rich:column>

Show text when hovering over an element in a dynamic search

I have this code snipped which executes a dynamic search.
<f:facet name="right" >
<p:autoComplete id="searchTree"
placeholder="Search"
autoHighlight="true"
minQueryLength="2"
scrollHeight="700"
value="#{treeSelectionView.configItemDtoSearchSelected}"
completeMethod="#{treeSelectionView.searchAllNodes}"
var="configItemDtoSearch"
itemValue="#{configItemDtoSearch}"
itemLabel="#{configItemDtoSearch.name}"
effect="fade"
converter="#{treeSearchConverter}">
<p:ajax event="itemSelect" listener="#{depedencyView.onNodeSearchSelect}"
update="configItemForm:configItemTree configItemForm:toolBar :centerContentPanel :dependencyPanel"
oncomplete="focusOnSelectedTree()" />
</p:autoComplete>
</f:facet>
I have another property configItemDtoSearch.fullPath. I want to show that property when hovering over an item (identified by configItemDtoSearch.name) in the search results. Is there a build in functionality in primefaces for this ? How can I do that ?
PS: There seem to be such functionality using tooltip, but I have no idea how to combine them. It can probably be done using JavaScript as well. The problem is getting the var="configItemDtoSearch".
Have you tried Itemtip example on primeFaces
<p:outputLabel value="Itemtip:" for="itemTip" />
<p:autoComplete id="itemTip" value="#{autoCompleteView.theme3}" completeMethod="#{autoCompleteView.completeTheme}"
var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" converter="themeConverter" forceSelection="true">
<f:facet name="itemtip">
<h:panelGrid columns="2" cellpadding="5">
<f:facet name="header">
<h:outputText styleClass="ui-theme ui-theme-#{theme.name}" style="margin-left:50px" />
</f:facet>
<h:outputText value="Display:" />
<h:outputText value="#{theme.displayName}" />
<h:outputText value="Key" />
<h:outputText value="#{theme.name}" />
</h:panelGrid>
</f:facet>
</p:autoComplete>

p:datatable sort or filter not working

I want to implement a sort and/or filter-function for my datatable, and I have done everything the documentation says.
The problem is, that if I klick on a sort-header or fill in a filter, nothing happens (even the ajax-symbol is not shown to i assume that nothing happens at all).
What can be the problem?
I am using:
templates to show the p:datatable
primefaces 5.1
myfaces bundle 2.2.0-20131222.194304-2575.jar
code:
<ui:define name="content">
<h:form>
<p:dataTable var="user" value="#{logbookProjectMembersBean.projectMembers}"
filterDelay="100" widgetVar="userList" emptyMessage="No ProjectMembers found with given criteria"
filteredValue="#{logbookProjectMembersBean.filteredProjectMembers}" rowStyleClass="#{user.enabled? 'row' : 'inactiveUserRow'}" styleClass="userList">
<f:facet name="header">
<p:outputPanel>
<h:outputText>Overview</h:outputText>
<h:outputText value=" - Search:" />
<p:inputText id="globalFilter" onkeyup="PF('userList').filter()" style="width:150px" placeholder="Enter keyword" />
</p:outputPanel>
</f:facet>
<p:column headerText="Name" filterBy="#{user.name}" filterMatchMode="contains" >
<h:outputText value="#{user.name}" />
</p:column>
<p:column headerText="Surname" filterBy="#{user.surname}" filterMatchMode="contains" >
<h:outputText value="#{user.surname}" />
</p:column>
</p:dataTable>
</h:form>
</ui:define>

How to validate a List<Object> in a Primefaces dataTable - JSF

I have a dataTable for Phone something like :
<p:dataTable value="#{billingInfoBean.billingProfile.payer.phones}" var="phone" id="payerPhoneTable">
<p:column>
<f:facet name="header">
<h:outputText value="Type" />
</f:facet>
<p:selectOneMenu value="#{phone.type}">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItems value="#{backOfficeLookupClient.allPhoneTypes}" />
</p:selectOneMenu>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Area Code" />
</f:facet>
<h:inputText value="#{phone.areaCode}" size="3" maxlength="3" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Exchange" />
</f:facet>
<h:inputText value="#{phone.exchange}" size="3" maxlength="3" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Local" />
</f:facet>
<h:inputText value="#{phone.local}" size="4" maxlength="4" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Extension" />
</f:facet>
<h:inputText value="#{phone.extension}" size="5" maxlength="5" />
</p:column>
</p:dataTable>
I am trying to use custom validation using the object Phone. I need to call a Phone Validation service which takes these column values as inputs. Can I make use of <f:validator> here in this case?, If yes, how ?
You could attach to the dataTable a validator listener
<f:event type="postValidate" listener="#{bean.customValidation}"/>
And validate the phone object in your bean
public void customValidation(ComponentSystemEvent event) {
...
}
Then iterate through all dataTable childrens and validate each one.
Here ther's a good tutorial to start with.
This omnifaces tag solved my problem :
http://showcase.omnifaces.org/validators/validateMultiple

checkbox button in data table

i have checkbox column in datatable, i want to have some ajax code which when i click on the checbox button on the header should check all the checkbox in the rendered data rows of the datatable. I am using primefaces, they have something out of box for this but we don't want to implement it. Please let me know if there is a easy solution using ajax.
As of now we have coded as below but we can go something better than that.
<p:dataTable id="userListTable" value="#{Bean.List}"
var="user" rowClasses="odd even"
<p:column style="width:18px">
<f:facet name="header">
<p:selectBooleanCheckbox
valueChangeListener="#{Controller.toggleCheckBox}"
partialSubmit="true" immediate="true" />
</f:facet>
<p:selectBooleanCheckbox value="#{user.disable}"
disabled="#{user.disable}"
valueChangeListener="#{circleController.enableDisableOkbutton}"
partialSubmit="true" immediate="true" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{labels['circle.userList.name']}" />
</f:facet>
<p:panelGrid styleClass="noBorders">
<p:row>
<p:column rowspan="3" style="width:60px;">
<p:graphicImage
value="#{name}.jpg"
style="width:50px;height:50px" />
</p:column>
<p:column>
<h:outputText value=" " />
<h:outputText value="#{user.firstName}" />
<h:outputText value=" " />
<h:outputText value="#{user.lastName}" />
</p:column>
</p:row>
<p:row>
<h:outputText value="#{user.country}" />
</p:row>
</p:panelGrid>
</p:column>
</p:dataTable>

Resources