0
votes

How can I select a row in icefaces datatable using radio button?

I tried with the following

<h:selectOneRadio styleClass="none" valueChangeListener="#{bean.setSelectedItem}"
                onclick="dataTableSelectOneRadio(this);">
                <f:selectItem itemValue="null" />
            </h:selectOneRadio>

And my javascript

function dataTableSelectOneRadio(radio) {
    var id = radio.name.substring(radio.name.lastIndexOf(':'));
    var el = radio.form.elements;
    for (var i = 0; i < el.length; i++) {
        if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
            el[i].checked = false;
        }
    }
    radio.checked = true;
}

In another post I got an answer that I should replace form.name with form.id. However after that I am getting error

radio.form is undefined 
var elements = radio.form.elements;

Could someone help me how to resolve this issue.

I would like to select one row in icefaces datatable using radio button.

Any help is highly appreciable.

Thanks

Posting my generated html source

See here is jsf code for radio button

<h:selectOneRadio  valueChangeListener="#{bean.setSelectedItem}"
id="reqselect" onclick="dataTableSelectOneRadio(this);">
<f:selectItem itemValue="null" />
</h:selectOneRadio>

My heartfelt apologies for posting in correct html source, I was testing some thing else and thus wrong source got posted. Pasted below is my correct html source, kindly see if you could find something.

2
This question is unanswerable by non-IceFaces users if you don't show the generated HTML. JavaScript runs in webbrowser on HTML, not in webserver on JSF.BalusC
The generated code shows that it's in the onkeypress, but in JSF you've put it in onclick. Huh?BalusC

2 Answers

2
votes

You should use the ice:selectOneRadio with spread layout:

<ice:selectOneRadio id="myRadioId" layout="spread" ... /> 
<ice:dataTable ... >
    <ice:column ...>
        <ice:radio for="myRadioId" ... />
    </ice:column>
    ...
</ice:dataTable>
0
votes

Here's how the generated HTML of each radio button look like:

<table id="crud:tab_cr:9:_id53" border="0" onkeypress="dataTableSelectOneRadio(this);">
  <tr>
    <td>
      <input type="radio" name="crud:tab_cr:9:_id53" id="crud:tab_cr:9:_id53:_1" value="null" onkeypress="dataTableSelectOneRadio(this);Ice.util.radioCheckboxEnter(form,this,event);" />
      <label for="crud:tab_cr:9:_id53:_1">null</label>
    </td>
  </tr>
</table>

So IceFaces is apparently rendering a whole HTML table around the radio button and putting the JS function on the <table> as well. The JS function clearly doesn't belong there at all (apart from the fact that onkeypress is incorrect, it should be onclick).

The <h:selectOneRadio> doesn't render a whole table around by default. This can only mean that you were actually using <ice:selectOneRadio> or that the IceFaces replaced the standard renderer for <h:selectOneRadio>. You need to fix it in this corner. Either replace by <h:selectOneRadio> or report a bug to IceFaces guys that their radio renderer is incorrectly putting the JS function on <table> element as well.