java - PrimeFaces Tree - show different context menu when selecting multiple nodes -
i'm working on primefaces web app. started getting bear me.
i have tree multiple types of nodes - each own context menu. problem want able show different context menus when single node selected , when multiple are. tree's selection mode should multiple
.
code:
<!-- here should context menu when multiple nodes selected --> <!-- <p:contextmenu for="tree"> --> <!-- <p:menuitem value="multiple items selected"> --> <!-- </p:menuitem> --> <!-- </p:contextmenu> --> <p:contextmenu for="tree" nodetype="type1"> <p:menuitem value="type 1 selected"> </p:menuitem> </p:contextmenu> <p:contextmenu for="tree" nodetype="type2"> <p:menuitem value="type 2 selected"> </p:menuitem> </p:contextmenu> <p:contextmenu for="tree" nodetype="type3"> <p:menuitem value="type 3 selected"> </p:menuitem> </p:contextmenu> <p:tree id="tree" value="#{treebean.root}" var="node" selectionmode="multiple"> <p:treenode type="type1"> <h:outputtext value="#{node}" /> </p:treenode> <p:treenode type="type2"> <h:outputtext value="#{node}" /> </p:treenode> <p:treenode type="type3"> <h:outputtext value="#{node}" /> </p:treenode> </p:tree>
thanks much!
i solved purely in client side changing css of menu items wanted hide.
i used single context menu both single selection , multiple hide items don't want show multiple selection. every menu item wanted hide in case of multiple selection got style="class: multiple_tree_cm;"
. used context menu event on tree.
example tree:
<p:tree id="tree" widgetvar="treewv"> <p:ajax event"contextmenu" onstart="updatetreecontextmenu();"/> <p:treenode .../> </p:tree>
example context menu:
<p:contextmenu for="tree"> <p:menuitem ... styleclass="multiple_tree_cm"/> <!-- don't want show multiple selection --> </p:contextmenu>
i hide menu items adding css class multiple_tree_cm class menu items. this:
function updatetreecontextmenu(event) { if (pf('treewv') && pf('treewv').selections && pf('treewv').selections.length === 1) { $('.multiple_tree_cm').removeclass('disabled'); } else { $('.multiple_tree_cm').addclass('disabled'); } }
css:
.multiple_tree_cm {} .disabled { height: 0 !important; display: none !important; }
Comments
Post a Comment