I have a primefaces datatable i need to display (selected row number) of (total number of rows) in the JSF page.I could get the row numbers displayed in one of the columns using rowIndexVar attribute but i am not getting any idea to display the same numbers separately in the input text on row select.
What should i need to do in JSF page or managed bean to get selected row number.
Please help me in this regard.
Below is my JSF page
<p:dataTable id="workSpaceList" var="data"
value="#{workSpaceBean.lpInfoList}" widgetVar="multiSelection"
selection="#{workSpaceBean.selectedRows}" resizableColumns="true"
liveScroll="true" scrollRows="55" scrollWidth="85%"
scrollHeight="81%" styleClass="datatable"
scrollable="true" rowIndexVar="rowIndex"
filteredValue="#{workSpaceBean.filteredWorkSpaceItems}">
<p:column selectionMode="multiple" style="width:3%" />
<p:column headerText="#" style="width:3%">
#{rowIndex+1}
</p:column>
<p:column headerText="Insured" filterBy="#{data.insuredName}"
sortBy="#{data.insuredName}" style="width:24%">
<h:outputText value="#{data.insuredName}" />
<!-- style="width:250px" -->
</p:column>
<p:column headerText="City" filterBy="#{data.custAddress_City}"
sortBy="#{data.custAddress_City}" style="width:12%">
<h:outputText value="#{data.custAddress_City}" />
</p:column>
.
.
.
.
</p:dataTable>
I believe that there's not a straight forward way to do so. Although using two ajax requests is not pretty, you can at least achieve the result you expect when using plain PrimeFaces. You can reduce this to one call if you replace the p:ajax with the PrimeFaces extensions pe:javascript which does not do a roundtrip to the server
Every row (tr) rendered by your datatable has a attribute called data-rk with your rowKey and another attribute called data-ri with your rowIndexVar value.
You can get the data-rk attribute through dtWidgetVar.selection (dtWidgetVar is the name of the widgetVar in your datatable).
You can now send the indexRow to your model using a remoteCommand
Here is the code I used to test it:
The View
<p:remoteCommand name="displayIndex" process="#this" update="index" actionListener="#{viewMBean.displayRowIndex}"/>
<p:dataTable id="dt" var="data"
value="#{viewMBean.dataModel}"
selection="#{viewMBean.selectedRow}"
selectionMode="single"
widgetVar="dtVar"
rowIndexVar="index">
<p:ajax event="rowSelect"
oncomplete="displayIndex([{name:'index', value:jQuery('tr[data-rk=' + dtVar.selection + ']').attr('data-ri')}])" process="#this" />
<p:column headerText="#">
#{index + 1}
</p:column>
<p:column headerText="Dados">
#{data.name}
</p:column>
</p:dataTable>
<br />
Row Index: <p:inputText id="index" value="#{viewMBean.index}" />
Managed Bean
public void displayRowIndex() {
FacesContext context = FacesContext.getCurrentInstance();
Map map = context.getExternalContext().getRequestParameterMap();
String pIndex = (String) map.get("index");
index = Integer.parseInt(pIndex);
}
In case you are using checkbox selection, you can retrieve the selected indexes like this:
function beforeDisplayingIndexes(){
var indexes = "";
jQuery("tbody .ui-chkbox-box").each(function(){
if (jQuery(this).hasClass("ui-state-active")){
indexes = indexes + (indexes === "" ? "" : ",") + jQuery(this).closest("tr").attr("data-ri");
}
});
//for debuging only
console.log(indexes);
displayIndex([{name:'index', value:indexes}])
}
You should now be able to make the proper modification to your code to make use of that.
I'm surprised by the complex solution in the other answer. Assuming you you have the #{workSpaceBean.lpInfoList} serverside when doing the 'select', you can easily do (code according to the PrimeFaces showcase, adapt according to your needs)
<p:ajax event="rowSelect" listener="#{dtSelectionView.onRowSelect}" update="..." />
public void onRowSelect(SelectEvent event) {
int rownum = cars.indexOf((Car)event.getObject());
}
Related
I have a data table displying some application parameters having 3 columns:
name (outputext),
value (p:cellEditor) and
edit (p:rowEditor used)
On clicking edit button in any row value field converts into input field and is having validator attached. After changing and accepting( clicking check icon) values an 'update button' is provided at the bottom of page to save all changes.
My problem is if a validation error comes and we press 'update button' then call goes to save function in managed bean with old value. So to stop this I want to disable 'update button' when any row is having edit mode opened. Can I check the mode of all cell editors in column 2 , so I will use that in disabled attribute of update button.
Please do suggest any other better way is also possible ?
Using a jsf 2.1 and primefaces 3.5
XHTML snippet
<!-- Body panel for display of individual configuration mode -->
<p:panel id="mainConfigPanel" >
<!-- status message section -->
<p:messages id="msg" autoUpdate="true" closable="true"/>
<!-- Parameter configuration mode -->
<p:panel
rendered="#{configMBean.configUtility.configParamModeOn}"
styleClass="panelNoBorder">
<p:dataTable id="configParamTable" var="configParamVar"
value="#{configMBean.configParamList}" editable="true">
<p:ajax event="rowEdit" listener="#{configMBean.onRowEdit}" update=":mainForm:msg" />
<p:ajax event="rowEditCancel" listener="#{configMBean.onRowCancel}" update=":mainForm:msg" />
<p:column headerText="Parameter Name" sortBy="#{configParamVar.paramConfigName}">
<h:outputText id="paramNameId" value="#{configParamVar.paramConfigName}" />
</p:column>
<p:column headerText="Param Value" sortBy="#{configParamVar.paramConfigValue}">
<p:cellEditor>
<f:facet name="output" > <h:outputText value="#{configParamVar.paramConfigValue}" /> </f:facet>
<f:facet name="input">
<p:inputText id="paramValueId" value="#{configParamVar.paramConfigValue}" required="true"
validator="#{configMBean.validateParam}" >
<f:validateLength maximum="2000" />
<f:attribute name="input" value="#{configParamVar}" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Edit" style="text-align:center;vertical-align:top;width:20px">
<p:rowEditor />
</p:column>
</p:dataTable>
<h:panelGrid columns="2" >
<p:commandButton value="Update Parameters" actionListener="#{configMBean.saveParamUpdate}" update=":mainForm" />
<p:commandButton value="Cancel" actionListener="#{configMBean.cancelParamUpdate}" immediate="true" update=":mainForm">
</p:commandButton>
</h:panelGrid>
</p:panel>
<!-- End of Parameter configuration mode panel -->
</p:panel>
<!-- End of body panel for individual configuration mode -->
</p:panelGrid>
<!-- end of main panel -->
Functions in Managed Bean
public void onRowEdit(RowEditEvent event) {
System.out.println(" In Row Edit");
}
public void onRowCancel(RowEditEvent event) {
System.out.println("In Row Canel of Parameter Config");
}
public void validateParam(FacesContext facesContext, UIComponent component,
Object value) throws ValidatorException, Exception {
if (value != null) {
//Getting parameter Name and Value for validation
String paramName = ((RowEntity) component.getAttributes().get("input")).getParamConfigName();
String paramValue = (String) value;
FacesMessage msg = null;
//Validation Cases
if (paramName.equalsIgnoreCase(ResourceBundle.getMsg("Param_Enable_FTP"))) {
if (!paramValue.equalsIgnoreCase("true") || !paramValue.equalsIgnoreCase("false")) {
msg = new FacesMessage(FacesMessage.SEVERITY_WARN, ResourceBundle.getMsg("Param_True_False_Validation")+ paramName, "");
throw new ValidatorException(msg);
}
} else if (paramName.equalsIgnoreCase(ResourceBundle.getMsg("Param_Contingency_Reserve"))) {
if (!Pattern.matches("-?\\d*\\.?\\d*", paramValue)) {
msg = new FacesMessage(FacesMessage.SEVERITY_WARN, ResourceBundle.getMsg("Param_Number_Validation") + paramName, "");
throw new ValidatorException(msg);
}
}// end if else if
}
}
From the docs: There is an Ajax Behavior Event for rowEdit
rowEdit | org.primefaces.event.RowEditEvent | When a row is edited.
You could disable the update button when the RowEditEvent got fired and release the button after the row editing was canceled or saved.
I Hope I got your question right and this helps.
I am working with jsf 2.0 et Primefaces. i have a selectOneMenu that have dynamic values of datas that correspond to the user connected. I want that when i choose a data and click on the button view the list of emails related to the data selected will be shown on the dataTable.
<p:panel>
<p:selectOneMenu id="data" value="#{mailMB.database}" styleClass="auto" required="true" effect="fade" >
<f:selectItem itemLabel="Select Data" itemValue="" />
<f:selectItems value="#{dataMB.datas}" var="data" itemLabel="#{data.keyword}" itemValue="#{data.keyword}"/>
</p:selectOneMenu>
<p:commandButton value="View" action="#{mailMB.grabemails()}" ajax="true" update="datas" icon="ui-icon-circle-check" styleClass="ui-priority-primary" />
</p:panel>
<p:panel id="panelform" header="Emails List" >
<p:dataTable value="#{mailMB.emailsByData}" var="item" id="datas" rowsPerPageTemplate="5,10,15,20,25,30"
paginator="true" rows="10"
selectionMode="single" filteredValue="#{mailMB.filteredMails}" rowKey="#{item.id}"
selection="#{mailMB.selectedMail}">
<p:ajax event="rowSelect" update=":form:dataView , :form:confirmDelete, :form:viewButton" listener="#{dataMB.onRowSelect}"/>
<p:ajax event="rowToggle" />
<p:column style="width:2%" exportable="false">
<p:rowToggler />
</p:column>
<p:column sortBy="#{item.email}" filterBy="#{item.email}">
<f:facet name="header">
<h:outputText value="Email"/>
</f:facet>
<h:outputText value="#{item.email}"/>
</p:column>
</p:dataTable>
</p:panel>
and this is my method in the managed Bean that returns the list of emails by data using the named query:
public List<Email> getEmailsByData() {
System.out.println("the database" + getDatabase());
return emailsByData = mailBusinessLocal.mails(getDatabase());
}
public List<Email> grabemails() {
return emailsByData = mailBusinessLocal.mails(database);
}
when i choose a data and click view nothing happens and the databate return null as it shown on the glassfish log.
You need to put your <p:selectOneMenu> inside a <h:form>. That's my first guess.
I want to show language in view_lang.xhtml using datatable,Below are my classes
CountryBean.java
private ArrayList<Country> existingCountryList;
public ArrayList<Country> getExistingCountryList() {
System.out.println("CountryBean.getExistingCountryList::Enter");
existingCountryList = new ArrayList<Country>();
existingCountryList.addAll(getCountryService().getExistingCountry());
System.out.println("existingCountryList in countryBean"+existingCountryList);
System.out.println("CountryBean.getExistingCountryList:::Exit");
return existingCountryList;
}
country.java
private Set<CountryLanguage> countryLanguage = new HashSet<CountryLanguage>(0);
CountryLanguage.java
private CountryLanguageID countryLangPK = new CountryLanguageID();
CountryLanguageID.java
private Country country;
private Language language;
view_lang.xhtml
<h:dataTable id="existingCountry" var="countryLang" value="#{countryBean.existingCountryList}"
style="width: 100%" cellpadding="0" cellspacing="1" border="0" class="role_detail_section" rowClasses="activity_white, activity_blue">
<h:column>
<f:facet name="header">
<h:outputText value="Language(Code)" styleClass="heading_pm_det_white"/>
</f:facet>
<h:outputText value="#{countryLang.languageName}(#{countryLang.languageCode})" styleClass="heading_pm_det_white" />
</h:column>
</h:dataTable>
I am able to get country object with language but not able to print in datatabel.
what will be syntex do I have to use forEach, if yes then how.
thnx
You can use <ui:repeat> for this, but this doesn't support Set (because it's not ordered by an index). You need to convert it to a List or an array. If you're using EL 2.2, then you could use the Set#toArray() call directly in EL:
<ui:repeat value="#{countryLang.countryLanguage.toArray()}" var="countryLanguage">
...
</ui:repeat>
Update, as per the comments, you'd like ot print it comma separated, here's how you could do it:
<ui:repeat value="#{countryLanguage.language.languageName}" var="languageName" varStatus="loop">
#{languageName}#{loop.last ? '' : ', '}
</ui:repeat>
Note: if languageName is actually a Set instead of List, obviously use toArray() there.
I'm having problems with a form that is rendered by a booleanButtom on PrimeFaces 3.5
the form appear as expected but when I commit the values of the field come null.
The code of the pag:`
<p:panelGrid>
<p:row>
<p:column>
<h:form id="city">
<p:panelGrid columns="2">
<h:outputText value="Name: "/>
<p:inputText label="Name" value="#{managedBean.city.name}"/>
<h:outputText value="Status: "/>
<p:selectBooleanButton value="#{managedBean.city.status}" onLabel="Enable" offLabel="Disable">
<p:ajax listener="#{managedBean.changeStatusCity()}"/>
</p:selectBooleanButton>
<h:outputText value="Add neighborhood?"/>
<p:selectBooleanButton id="btAddNeighborhood" value="#{managedBean.addNeighborCity}" onLabel="Cancel" offLabel="Yes">
<p:ajax update=":addNeighbor" listener="#{managedBean.addNeighborCity()}"/>
</p:selectBooleanButton>
</p:panelGrid>
</h:form>
</p:column>
</p:row>
<p:row>
<p:column>
<h:form id="addNeighbor">
<p:panel header="Neighborhood" rendered="#{managedBean.addNeighborCity}">
<p:panelGrid columns="2">
<h:outputText value="Name: "/>
<p:inputText label="Name" value="#{managedBean.neighborhood.name}"/>
<h:outputText value="Status: "/>
<p:selectBooleanButton value="#{managedBean.neighborhood.status}" onLabel="Enable" offLabel="Disable" onIcon="ui-icon-check" offIcon="ui-icon-close">
<p:ajax listener="#{managedBean.changeStatusNeighbor()}"/>
</p:selectBooleanButton>
</p:panelGrid>
</p:panel>
</h:form>
<h:form id="formBt">
<p:commandButton id="bt" value="Add" actionListener="#{managedBean.saveNeighborCity()}" update=":addNeighbor, :city:btAddNeighborhood"/>
</h:form>
</p:column>
</p:row>
</p:panelGrid>`
And the manage bean
public void addNeighborCity(){
if(addNeighborCity){
neighborhood = new Neighborhood();
neighborhood .setStatus(true);
neighborhood .setStringStatus("Enable");
}else{
neighborhood = null;
}
}
public void changeStatusNeighbor() {
if (neighborhood .isStatus()) {
neighborhood .setStringStatus("Enable");
} else {
neighborhood .setStringStatus("Disable");
}
}
public void saveNeighborCity(){
city.getNeighborhoods().add(neighborhood );
neighborhood = null;
addNeighborCity = false;
}
All the input inside of the form that was rendered doesn't send the information to the manage bean and when I put the button that add the neighbor to the list of the city the button stop working and doesn't call the manage bean any more.
Does someone knows what I'm doing wrong or what is happening.
I'm using Primefaces3.5, GlassFish4.0 and JSF2.2
As you did not post the whole managed bean, I guess that you're using the default scope of the managed bean: #RequestScoped. In that case you should use #ViewScoped.
I solved the problem, I was using glassfish 4 and it forces the jsf2.2 even when you put the jsf2.1 in our project, then I changed to glassfish 3 and all work just fine, thanks for the answers, and I'm using #ScopeSession.
I am using primefaces datatable with clickable rows and I need to find way how to set selected row from backing bean.
There is my datatable definition:
<p:dataTable id="cablePathTable" var="cablePath" value="#{commonTableBean.cableLazyModel}" rows="100"
selectionMode="single" selection="#{commonTableBean.selectedCablePathTblRow}"
rowIndexVar="rowIndex" widgetVar="datatableVar"
emptyMessage="---">
<p:ajax event="rowSelect" process="#this" update=":form:portFieldset" />
<p:column headerText="No">
<h:outputText value="#{cablePath.column1}" />
</p:column>
<p:column headerText="Port A">
<h:outputText value="#{cablePath.column4}" />
</p:column>
<p:column headerText="Port B">
<h:outputText value="#{cablePath.column5}" />
</p:column>
I have tried following approach, but with no success.
In backing bean I have added method:
public void test(){
DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("form:cablePathTable");
dataTable.setRowIndex(2);
}
And I have added test butoon to the XHTML page:
<p:commandButton process="#this" update=":form:cablePathTable" value="set2row" action="commonTableBean.test"/>
But nothig is changed on the datatable, selection didn't change...
Please any ideas how to solve this problem?
Just set the value behind selection="#{commonTableBean.selectedCablePathTblRow}".
public void test(){
selectedCablePathTblRow = cablepath;
}