Implementing a dynamic ContextMenu for a Primefaces multi-select Datatable

Question

I have a paged PrimeFaces Datatable with a context menu, and i wish to implement multi-select, where the menu items in the context menu will depend on the number of items selected, as some actions will only be available when only one item is selected, and others will valid when one or more are selected.

My first idea was to use the "rendered" option of individual menu items, which is set in the controller bean. This sort-of works, as indeed the correct menu items were displayed. The problem is that using the rendered functionality of the menuitems had the effect that the selection is lost on the datatable, defeating the purpose of the exercise.

    <p:dataTable id="orders" dynamic="true" var="item" rowKey="#{item.id}" value="#{ordersController.orders}"
                 emptyMessage="#{uistrings['datatable.nodata']}" paginator="true" paginatorPosition="both"
                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}  {PageLinks}  {NextPageLink} {LastPageLink}"
                 paginatorAlwaysVisible="false" rows="10" selectionMode="multiple" selection="#{ordersController.selectedOrders}" widgetVar="orderList">

        <p:ajax event="sort" listener="#{ordersController.onSort}" update="orders"/>
        <p:ajax event="rowSelect" update="contextMenu"/>
        <p:ajax event="rowUnselect" update="contextMenu"/> 

        <p:column id="balance_date" sortBy="#{item.balanceDate}">
            <f:facet name="header">
                <h:outputText value="#{uistrings['orders.column.label.balancedate']}"/>
            </f:facet>
            <h:outputText value="#{item.balanceDate}">
                <f:converter converterId="isoDateTimeConverter"/>
                <f:attribute name="#{webUiConstBean.ISO_CONVERTER_ATTRIBUTE_TYPE}" value="#{webUiConstBean.ISO_DATE_CLASS}" />
                <f:attribute name="#{webUiConstBean.ISO_CONVERTER_ATTRIBUTE_PATTERN}" value="#{webUiConstBean.ISO_DATE_FORMAT}" />
            </h:outputText>
        </p:column>
        <p:column id="recipient_name" sortBy="#{item.recipient.displayName}">
            <f:facet name="header">
                <h:outputText value="#{uistrings['orders.column.label.recipient.displayName']}"/>
            </f:facet>
            <h:outputText value="#{item.recipient.displayName}"/>
        </p:column>

    [snip]

    </p:dataTable>

    <p:contextMenu id="contextMenu" for="orders">
        <p:menuitem value="#{uistrings['orders.menu.details']}" update="details, orders"
                    oncomplete="detailDialog.show()" icon="ui-icon-search" rendered="#{ordersController.renderDisplayDetails}" />

        <p:menuitem value="#{uistrings['orders.button.label.delete']}" icon="ui-icon-trash"
                    update="orders" ajax="true" onclick="confirmDelete.show()"
                    rendered="#{ordersController.renderDeleteDocuments}"/>
    </p:contextMenu>

After looking for solutions in this and other forums, finding some hints, and figuring out a few alternatives myself, I made several other attempts including:

1) using two complete context menus: one for when one item is selected, and other for when many items are selected, and using the rendered option on the context menus themselves, rather than their items.

In this case the rowSelect and rowUnselect events update both

    <p:ajax event="rowSelect" update="contextMenu1Selected contextMenuManySelected"/>
    <p:ajax event="rowUnselect" update="contextMenu1Selected contextMenuManySelected"/> 

And the context menus look something like this

    <p:contextMenu id="contextMenu1Selected" for="orders" rendered="#{ordersController.render1Selected}">
        <p:menuitem value="#{uistrings['orders.menu.details']}" update="details, orders"
                    oncomplete="detailDialog.show()" icon="ui-icon-search"/>

        <p:menuitem value="#{uistrings['orders.button.label.delete']}" icon="ui-icon-trash"
                    update="orders" ajax="true" onclick="confirmDelete.show()"/>
    </p:contextMenu>

    <p:contextMenu id="contextMenuManySelected" for="orders" rendered="#{ordersController.renderManySelected}">
        <p:menuitem value="#{uistrings['orders.button.label.delete']}" icon="ui-icon-trash"
                    update="orders" ajax="true" onclick="confirmDelete.show()"/>
    </p:contextMenu>

But this did not work at all. No menus were ever shown.

2) Placing the two context menus inside an outputPanel, and updating the panel. This had the same result as my first attempt. i.e. menu-items rendered correctly but losing the selection

        <p:outputPanel id="contextMenuPanel" autoUpdate="true">
            <p:contextMenu id="contextMenu1Selected" for="orders" rendered="#{ordersController.renderDisplayDocument}">
                [menu items]
            </p:contextMenu>

            <p:contextMenu id="contextMenuManySelected" for="orders" rendered="#{ordersController.renderDeleteDocuments}">
        [menu items]
            </p:contextMenu>
        </p:outputPanel>

3) Defining the contextMenu model using a menuModel provided by the controller, which itself has two models available for the two cases and delivers the correct one depending on the number of selected items. Also in an output Panel

        <p:outputPanel id="contextMenuPanel" autoUpdate="true">
            <p:contextMenu id="contextMenu" for="orders" model="#{ordersController.menuModel}"/>
        </p:outputPanel>>

This also did not work. MenuItems correctly rendered, but multi-selections lost as before.

I have exhausted the options i am aware of.

Has anyone successfully implemented dynamic context menus for datatables with multi-select?

Or does anyone have any further ideas that might work?

Cheers.

Answer 1

Maybe too late but here is my solution...

Context menu with javascript:

<p:contextMenu id="searchResultTableContextMenuId" for="searchResultTableId" beforeShow="return true;"
    widgetVar="searchResultTableContextMenuVar">
    <p:menuitem value="#{msgs['label.resultlistAction.edit']}"
        disabled="#{curSelectedDocsCount ne 1}" icon="fa fa-pencil"
        oncomplete="PF('editPropertyDialogVar').show();" update=":editPropertyFormId" />
    <p:menuitem value="#{msgs['label.resultlistAction.delete']}"
        disabled="#{curSelectedDocsCount le 0}" icon="fa fa-trash"
        actionListener="#{deleteDocumentBL.initFromResultList()}"
        oncomplete="PF('deleteDocumentsDialogVar').show();" update=":deleteDocumentsFormId" />
    <p:menuitem value="#{msgs['label.resultlistAction.download']}"
        disabled="#{curSelectedDocsCount ne 1}" icon="fa fa-download" ajax="false"
        action="#{contentBL.downloadMainContent(curSearch.getViewId(), curSearch.selectedSearchResults.get(0))}" />
    <p:menuitem value="#{msgs['label.resultlistAction.clearSelectionId']}" disabled="#{curSelectedDocsCount lt 1}" icon="fa fa-times-circle-o"
        action="#{curSearch.clearSelectedSearchResults()}" update="@(.resultlistActionGrid) @(.searchResultTable)"
        oncomplete="PF('hitlistTableVar').unselectAllRows();" />
</p:contextMenu>

<!-- javascript to fix problem that the context menu hides if it is updated in ajax event contextMenu -->
<script type="text/javascript">
    var currentEvent;
    $(document).ready(function () {
        PrimeFaces.widget.ContextMenu.prototype.show = function (e) {
            // hide other contextmenus if any
            $(document.body).children('.ui-contextmenu:visible').hide();

            if (e) {
                currentEvent = e;
            }

            var win = $(window),
                    left = e.pageX,
                    top = e.pageY,
                    width = this.jq.outerWidth(),
                    height = this.jq.outerHeight();

            //collision detection for window boundaries
            if ((left + width) > (win.width()) + win.scrollLeft()) {
                left = left - width;
            }
            if ((top + height ) > (win.height() + win.scrollTop())) {
                top = top - height;
            }

            if (this.cfg.beforeShow) {
                this.cfg.beforeShow.call(this);
            }

            this.jq.css({
                'left': left,
                'top': top,
                'z-index': ++PrimeFaces.zindex
            }).show();

            e.preventDefault();
        };
    });
</script>

The dataTable needs to handle some ajax events for context menu showing and updating:

<p:dataTable id="searchResultTableId" ...>
    <p:ajax event="rowSelect" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="rowUnselect" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="toggleSelect" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="rowSelectCheckbox" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="rowUnselectCheckbox" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="contextMenu" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" oncomplete="PF('searchResultTableContextMenuVar').show(currentEvent);" />
</p:dataTable>