Can I have both both radio selection and row selection in a p:dataTable

Question

I have a p:dataTable which needs to have both radio selection and row selection. In primefaces.org/showcase we have checkbox and row selection but with multiple selection and only row selection and only radiobutton selection.

Below is my code

<p:dataTable value="#{streetListBean.streetList}" var="street"
             selection="#{streetListBean.selectedStreet}"
             rowKey="#{street.streetId}">
  <p:column selectionMode="single" style="text-align:center" width="5%"/>
  <p:column headerText="#{msgs['label.streetName']}">
    <p:outputLabel value="#{street.streetName}"/>
  </p:column>
  <p:column headerText="#{msgs['label.postalCode']}">
    <p:outputLabel value="#{street.postalCode}"/>
  </p:column>
  <p:column headerText="#{msgs['label.location']}">
    <p:outputLabel value="#{street.locName}"/>
  </p:column>
</p:dataTable>

in above datatable we have only radio selection, I need row selection too. please help

No it **should not**, maybe _"you would **like** it to have..."_ Did you read/check the documentation? And what is your PF version? — Kukeltje, Mar 09 '20 at 05:58

score 0 · Answer 1 · answered Mar 10 '20 at 09:15

One thing to ALWAYS remember, is that client-side everything is html/javascript/css (with the help of jQuery in this case).

PrimeFaces 7.0 (and up) has a onRowClick attribute but I'm not sure if this is suitable for this case. A solution that always works (older and newer versions) is composed of several really simple steps (just remember the first statement in this answer)

Start with jQuery for getting Click event on a Table row. For this we need to check where the actual clicks need to be on. Using the id of the datatable for the first part is not a bad choice. But what is the id? Well, for this there also is a Q/A in Stackoverflow. How can I know the id of a JSF component so I can use in Javascript For the PrimeFaces showcase this actually is #form\\:radioDT" But within that whole html structure, we only need to click on certain rows (e.g. not in headers or the likes). This therefor becomes something like

$("#form\\:radioDT").on("click", "tbody.ui-datatable-data tr", function() {
    console.log(this);
});

If you try this in the PrimeFaces showcase, you'll see clicks on the row being logged (including clicks that originate on the radiobutton)

The next step would be to Simulate a click on 'a' element using javascript/jquery

But click where? Well, that can be easily found with the browser developer tools as well. Related to the tr that was clicked (this) it is:

$(this).find(".ui-selection-column .ui-radiobutton-icon").click(); //javascript version (selectors can be different, many work). Alternative is using jquery .trigger('click')

Combining this results in

$("#form\\:radioDT").on("click", "tbody.ui-datatable-data tr", function() {
    console.log(this);
    $(this).find(".ui-selection-column .ui-radiobutton-icon").click();
});

Which unfortunately results in a 'too much recursion' error. This is caused by the fact that a click on the radio button bubbles up to the row which triggers a click on the radiobutton which... you get the point.

So the first thought is to prevent clicks bubbling up. Unfortunately, it is not bubling up from our function but from the click on the radiobutto so we need to adapt our source. Again existing Q/A in stackoverflow help: jQuery trigger click gives "too much recursion"

What you do is check if the click on the row originated as a click on anything but the radiobutton. Only then simulate the click. For this we need the event and from the event the target and with the same selector as for the click we do a check:

$("#form\\:radioDT").on("click", "tbody.ui-datatable-data tr", function(event) {
        if ( !$(event.target).is('.ui-selection-column .ui-radiobutton-icon')) {
            console.log("Simulate click on radiobutton: ", event.target);
            $(this).find(".ui-selection-column .ui-radiobutton-icon").click();
        } else {
            console.log("Skip: ", event.target);
        }
    }
);

Keep in mind that $("#form\\:radioDT") is based on the full client id of the datatable component in the PrimeFaces showcase. Replace it with yours.

How and where to add this to your page and how to re-add it in the case of ajax updates is also covered in Q/A in Stackoverflow.

Can I have both both radio selection and row selection in a p:dataTable

1 Answers1