When nesting another datatable in rowexpansion, splitbutton stops working when 2 or more main rows are loaded

Question

So I'm trying to nest a datatable within another datatable in the rowexpansion tag as follows:

<h:form>
    <p:dataTable var="item" 
                 value="#{bean.items}">
        <p:column>
            <p:rowToggler/>
        </p:column>
        <p:column headerText="Item Name">
            <h:outputText value="#{item.name}"/>
        </p:column>
        <p:rowExpansion>
            <p:dataTable var="subitem" 
                         value="#{item.subitems}">
                <p:column headerText="Subitem Name">
                    <h:outputText value="#{subitem.name}" />
                </p:column>
                <p:column>
                    <p:splitButton value="Save" action="#{bean.save}">
                        <p:menuitem value="Update" action="#{bean.update}"/>
                        <p:menuitem value="Delete" action="#{bean.delete}"/>
                    </p:splitButton>
                </p:column>
            </p:dataTable>
        </p:rowExpansion>
    </p:dataTable>
</h:form>

the testing methods in the bean are just

    public void save() {
        addMessage(FacesMessage.SEVERITY_INFO, "Success!", "Saved subitem");
        PrimeFaces.current().ajax().update(":frmTopbar");
    }

    public void update() {
        addMessage(FacesMessage.SEVERITY_INFO, "Success!", "Updated subitem");
        PrimeFaces.current().ajax().update(":frmTopbar");
    }

    public void delete() {
        addMessage(FacesMessage.SEVERITY_INFO, "Success!", "Deleted subitem");
        PrimeFaces.current().ajax().update(":frmTopbar");
    }
    public void addMessage(FacesMessage.Severity severity, String summary, String detail) {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(severity, summary, detail));
    }

If only a single item and its subitems is loaded, everything displays and splitbutton buttons work fine.

The bean just sends a FacesMessage to test and like I said, the message is properly shown for each of the 3 buttons.

But as soon as I load 2 or more items and their subitems, everything looks visually correct, but the commands in splitbutton no longer reach bean, so no FacesMessage is sent.

Does anyone have a clue about what is going on or a suggestion as to what can be done to fix it?

I'm using primefaces v11.0

Thanks a lot!

Answer 1

I seem to have found a workaround with p:remoteCommand using BalusC's tips.

So what I've done, is place this somewhere in my page that will map a javascript function to a bean method.

<p:remoteCommand name="splitButtonMenuitemClicked" actionListener="#{bean.save}" style="display: none;" />

I then place this jquery code in my page to catch the click event from any split button:

jQuery( document).delegate( ".ui-splitbuttonmenu .ui-menuitem-link", "click", 
    function(e){
        var menuitemText = $(this).find("span.ui-menuitem-text");
        var itemText = $(menuitemText).text();
        splitButtonMenuitemClicked([{ name: "fooName", value: itemText }])
    }
);

Now in my bean function, I just retrieve my parameter as follows:

public void save() {
    String fooName= FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("fooName");
    //fooName is unique key in may table, so it works well to work on the correct entity
...
}

It'll do for now, although it would be nice if the components worked as one hopes.