How To Block a Picklist on select event of a treetable

UI Components for JSF
Post Reply
shaunak17
Posts: 9
Joined: 01 Feb 2014, 03:10

11 Sep 2014, 03:25

Hi All,

I am using:
Primeface 5.0
Server : Jboss

I am trying to block a picklist using Block UI, but on an event, select event, on a Tree Table.
I have also tried using the client side calls show() and hide(), but didn't work.

How do I trigger the BlockUi from something like below:

Code: Select all

<p:treeTable ...>
<p:ajax event="select" listener="#{portPickerManager.onNodeSelect}" update=":portPickerForm:portPickListPanel"/> 
</p:treeTable>

Code: Select all

<p:blockUI widgetVar="blockPickerVar" block=":portPickerForm:portPickListPanel"
		trigger=":portPickerForm:invTree">
		<h:panelGrid id="msgPanel" columns="2">
			<p:graphicImage value="/images/loading.gif" width="20px"
				height="20px" />
			Fetching ports...
		</h:panelGrid>
	</p:blockUI>
Please let me know if anyone has tried it out.

Thanks,
-Shaunak.

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4345
Joined: 16 Oct 2011, 19:19
Location: Singapore

11 Sep 2014, 13:04

You have to post full code.In this case trigger may not correctly referring tree component.How you used client side methods?
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

shaunak17
Posts: 9
Joined: 01 Feb 2014, 03:10

11 Sep 2014, 22:22

Hi Sudheer,

Below is the complete code.

Code: Select all

<p:dialog id="portPickerDlg" modal="true" header="Port Picker" widgetVar="portPickerDlgVar"
    dynamic="true"	style="width:640px; height:420px;" 
      styleClass="settingsDialogheader settingsDialogContent" 
	appendTo="@(body)" closable="false" closeOnEscape="true" resizable="false"> 
	<h:form id="portPickerForm">				
		<p:panelGrid id="portPickerGrid" columns="2" columnClasses="alignTop,alignTop" >				
		  <h:panelGroup id="inventoryTreePanel" style="display:block;margin:5px 5px 0px 5px">
		    <p:panel id="inv-west" styleClass="menuPanelClass" >
			<h:outputText value="#{inventoryFwBean.selectTreeNode()}" />						
		 	<p:treeTable id="invTree" value="#{inventoryFwBean.root}" 
					var="treeNode"  widgetVar="treeNodeVar"
					selection="#{inventoryFwBean.selectedNode}" selectionMode="single"
					styleClass="ui-tree-table-style"
					style="height:380px; background-color: #F1F1F1 !important;"
                                      >									
				     [b][i]<p:ajax event="select" listener="#{portPickerManager.onNodeSelect}"   

                                        update=":portPickerForm:portPickListPanel"/>  [/i][/b]
				<p:ajax event="collapse"/> 									 		
				<p:column style="width:180px; font-weight: #{treeNode.type == 1 ? 'bold !important;' : ''} 	

                                 background-color: #{treeNode.isSelected() ? '#0194da !important;' : '#F1F1F1 !important;'}">  
				<h:outputText value="#{treeNode.displayName}" />  
 				</p:column> 
 			</p:treeTable>
					
			</p:panel>
			<p:resizable for="inv-west" handles="e" 
			style="border: none; padding: 0; width: auto;" minWidth="220"  

                         styleClass="menuPanelResizeClass"/>  
		</h:panelGroup>										
					
 		<p:panel id="portPickListPanel" style="border:none !important;margin:5px 5px 0px 0px">	
			<p:pickList value="#{portPickerManager.portListModel}" var="port"
					itemLabel="#{port}" itemValue="#{port}"
				converter="portConverter">
				<f:facet name="sourceCaption">Available Switch Ports(ID | NAME)</f:facet>
				<f:facet name="targetCaption">Selected Ports(ID | NAME)</f:facet>
					<p:column>#{port.portId}
					</p:column>
					<p:column>
					#{port.portName}
					</p:column>
					<p:ajax event="transfer"
						listener="#{portPickerManager.handlePortTransfer}"
						update=":portPickerForm:portPickerMsg,:portPickerForm:portPickerOkBtn" />
			</p:pickList>
			<p:messages id="portPickerMsg" for="portPicker"
					autoUpdate="false" />
					</p:panel>
	</p:panelGrid>
	<div align="right" style="margin:5px 5px 5px 0px">
		<p:commandButton immediate="true" style="background-color:white;border:none;
                           padding-left:10px;padding-right:10px;height:30px;"
			  value="Cancel" onclick="PF('portPickerDlgVar').hide();"
			  id="portPckrCancelBtn" />
		<p:commandButton id="portPickerOkBtn" immediate="true"
			disabled="#{portPickerManager.disablePortPickerOkBtn}" value="Ok"
			actionListener="#{portPickerManager.selectionCallBack}"
			oncomplete="PF('portPickerDlgVar').hide();"						
			style="background:#0099CC;color:white;font-family:'Open Sans', Arial;
                         font-weight:normal;padding-left:10px;padding-right:10px;height:30px;
                         margin- left:10px;" />
		</div>
	</h:form>			
</p:dialog> 
	
	<p:blockUI block=":portPickerForm:portPickListPanel"
		trigger=":portPickerForm:invTree">
		<h:panelGrid id="msgPanel" columns="2">
			<p:graphicImage value="/images/loading.gif" width="20px"
				height="20px" />
			Fetching ports...
		</h:panelGrid>
	</p:blockUI>

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 28 guests