jsf - Column-specific context menu for Primefaces DataTable -
how can define context menu each column differently in primefaces datatable? putting <p:contextmenu> inside <p:column> not work properly. want context menu different depending on column user right-clicked in.
this not work (context menu created same columns):
<p:datatable value="#{values}" var="value" selectionmode="single" selection="#{selectedvalue}" id="table"> <p:column headertext="col 1"> <h:outputtext value="#{value.balance}"> <f:convertnumber type="currency"></f:convertnumber> </h:outputtext> <p:contextmenu> <p:menuitem value="report"></p:menuitem> <p:menuitem value="change"></p:menuitem> </p:contextmenu> </p:column> <p:column headertext="col 2" > <h:outputtext value="#{value.balance2}"> <f:convertnumber type="currency"></f:convertnumber> </h:outputtext> <p:contextmenu> <p:menuitem value="something else"></p:menuitem> </p:contextmenu> </p:column> </p:datatable> how add column-specific context menu in primefaces datatable either using pf components, extending pf components, or adding custom javascript?
have tried(i have tested primefaces 3.5): contextmenu can attached jsf component, each of rows in primefaces datatable has private , dynamic id(ex: :carlist:0:test1 :carlist:1:test1 ...), think should use contextmenu inside column:
<p:column headertext="model"> <p:panel id="test1"> <h:outputtext value="#{carr.model}" /> <p:contextmenu for="test1" widgetvar="cmenu"> <p:menuitem value="edit cell" icon="ui-icon-search" onclick="product.showcelleditor();return false;" /> <p:menuitem value="hide menu" icon="ui-icon-close" onclick="cmenu.hide()" /> </p:contextmenu> </p:panel> </p:column> <p:column headertext="manufac" style="width:20%"> <p:panel id="test2"> <h:outputtext value="#{carr.manufacturer}" /> <p:contextmenu for="test2" widgetvar="cmenu2"> <p:menuitem value="edit cell" icon="ui-icon-search" onclick="product.showcelleditor();return false;" /> <p:menuitem value="hide menu" icon="ui-icon-close" onclick="cmenu2.hide()" /> <p:menuitem value="hide menu" icon="ui-icon-close" onclick="cmenu2.hide()" /> </p:contextmenu> </p:panel> </p:column> if want specify row:
<p:column headertext="model" style="width:30%"> <p:panel id="test1"> <h:outputtext value="#{carr.model}" /> <p:contextmenu rendered="#{carr.model eq 'sent'}" for="test1" widgetvar="cmenu"> <p:menuitem value="edit cell" icon="ui-icon-search" onclick="product.showcelleditor();return false;" /> <p:menuitem value="hide menu" icon="ui-icon-close" onclick="cmenu.hide()" /> </p:contextmenu> <p:contextmenu rendered="#{carr.model eq 'waiting'}" for="test1" widgetvar="cmenu3"> <p:menuitem value="hide menu" icon="ui-icon-close" onclick="cmenu3.hide()" /> </p:contextmenu> </p:panel> </p:column>
Comments
Post a Comment