Radio button in table view

[#1]

Hi,

I am having scenario to put 3 radio buttons (for 3 columns as group) in table view using table view iterator.

How can I create a radio button like input field in iterator through CL_HTMLB_RADIOBUTTON class.

Can anybody please give me solution how to do it.

Thanks in advance

Srinivas S

[athavanraja · Accepted solution]

Hi,

check out this weblog by Brian.

/people/brian.mckellar/blog/2003/10/31/bsp-programming-htmlb-tableview-iterator

code for radiobutton would be like below in the IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START method.

p_replacement_bee = cl_htmlb_radiobutton=>factory
  EXPORTING
*    CHECKED       =
*    DISABLED      = 'FALSE'
*    ENCODE        = 'TRUE'
    id            =
*    ID_POSTFIX    =
*    KEY           =
*    ONCLICK       =
*    ONCLIENTCLICK =
*    TEXT          =
*    TOOLTIP       =
  receiving
    element       =
    .

Regards

Raja

[Former Member]

Hi Thanks for your inputs.

Here I clubed both of your solutions.

method if_htmlb_tableview_iterator~render_cell_start.
 
  data: rbg type ref to cl_htmlb_radiobuttongroup,
        rb  type ref to cl_htmlb_radiobutton,
        rad_gp TYPE REF TO cl_bsp_bee_table.
 
  check p_column_key = 'FMODE'.
 
  create object rad_gp.
 
  rbg = cl_htmlb_radiobuttongroup=>factory( 
          id = p_cell_id columncount = '2' ).
  rad_gp->add( element = rbg level = 1 ).
 
  rb ?= cl_htmlb_radiobutton=>factory( id = '1' text = 'One' ).
  rad_gp->add( element = rb level = 2 ).
 
  rb ?= cl_htmlb_radiobutton=>factory( id = '2' text = 'Two' ).
  rad_gp->add( element = rb level = 2 ).
 
  p_replacement_bee ?= rad_gp.
 
endmethod.

Thanks for your great help

Srinivas S

-

---

Message was edited by: Brian McKellar

Reformatted source, and changed sequence so that create object is after check.

[former_member181879]

Yes, of course, once all radio buttons are in one column, things are much easier, the source more elegant and better to manage.

One final comment: all factory methods contain both an ID and ID_POSTFIX parameters. So in cases where we have sub controls, like radio buttons in a radio button group, I like to use the following code:

rbg = cl_htmlb_radiobuttongroup=>factory(
   id = p_cell_id columncount = '2' ).
 
rb ?= cl_htmlb_radiobutton=>factory( 
   id = p_cell_id id_postfix = '1' text = 'One' ).
 
rb ?= cl_htmlb_radiobutton=>factory(
   id = p_cell_id id_postfix = '2' text = 'Two' ).  

[Former Member]

Hi Raja,

Thanks you for your quick response.

I coded that radio button in iterator but it does't display the radio button in the table.

because of the radio group, when I debugging the radio button class it getting some values from radio group class here we are not specify any radio group, I mean there is no relation between radio group and button.

How can I create a radio button through classes.

Thanks in advance

Srinivas S

[athavanraja]

Hi Srinivas,

Sorry about my hasty answer in the previous post without really analyzing the issue. Here is the solution for your problem.

In your IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START method add the following code.

WHEN 'RAD1' . (first radio button column)
DATA: rad_gp TYPE REF TO cl_bsp_bee_table.
      CREATE OBJECT rad_gp.

rad_gp->add_html( 
html = '<input type="radio" value="V1" checked name="R1">' 
).
p_replacement_bee = rad_gp.
WHEN 'RAD2' . (second radio button column)
DATA: rad_gp1 TYPE REF TO cl_bsp_bee_table.
      CREATE OBJECT rad_gp1.

rad_gp1->add_html( 
html = '<input type="radio" name="R1" value="V2">' 
).
p_replacement_bee = rad_gp1.

ENDCASE.

The trick here for the radiobutton group is the name of the input field. In the above example name attribut is set to R1 in both the radiobuttons, that way they will be treated as a radiobutton group. In the above example all the radio buttons of your tableview will be part of the same radiobutton group, meaning only one radiobutton can be selected for the entire table.

To have a selection per row, put in a logic (row id is the ideal one) to replace the name attribute of the input field.

Regards

Raja

Hope this helps.

Regards

Raja

[former_member181879]

Yes, this solution by Raja is probably the only way to solve the problem. Not very satisfactory. As long as you have the radiobuttons distributed over the columns, such that each row is one group, and per column one radiobutton, I see no other/easier solution.

The problem/reason is first the fact that the <htmlb:radioButtons> require a <htmlb:radioButtonGroup>. And this is difficult to get this group onto the processing stack at the right moment. Hmmm... I have an idea. You can test it.

Inside your RENDER_CELL_START method you will have to render three different radio buttons. The important part is to also handle here the radioButtonGroup. As a first step, declare an instance attribute m_rbg TYPE REF TO cl_htmlb_radiobuttongroup. Now the coding for the RENDER_CELL_START will have about the following structure:

WHEN 'RB_1'.
  m_rbg = cl_htmlb_radiobuttongroup=>factory(...).
  m_page_context->element_process( m_rbg ).
  p_replacement_bee = cl_htmlb_radiobutton->factory(...).
WHEN 'RB_2'.
  p_replacement_bee = cl_htmlb_radiobutton->factory(...).
WHEN 'RB_3'.
  p_replacement_bee = cl_htmlb_radiobutton->factory(...).
WHEN 'RB_3_PLUS_ONE_COLUMN'.
  m_page_context->element_process( m_rbg ).
ENDCASE.

For all three columns, we will return a radio button for the tableView to render. Just before we return the first radiobutton, we start rendering the group, and <b>after</b> we have completed the last radiobutton (which means there <i><b>must</b></i> be at least one column after the radio button column, we also close the radiobuttongroup.

I have not tested this, but quickly looked at the code, and am optimistic that it will work. HOWEVER, we can not guarantee this for ever and ever. This might work because of the way the current code is structured. Who knows what the future will bring.

brian

[maximilian_schaufler]

What's the reason to put the closing tag for the group in the column after the last button - instead of just rendering it after the button (and maybe use a html_bee to combine button and group tag)?

[former_member181879]

Hi Max,

<i>What's the reason to put the closing tag for the group in the column after the last button - instead of just rendering it after the button (and maybe use a html_bee to combine button and group tag)?</i>

The problem is that the RENDER_CELL_START returns a bee, that is only processed later. So you must complete the radiobuttongroup processing only after the tableView has processed the last radio button. This is only possible within the next column.

The idea using a tableBee was nearly good, but will fail :(. A tableBee is effectively a list of bees that are processed in sequence. But it can not accept half processed bees, only bees that must be completely processed.

brian

[maximilian_schaufler]

>>What's the reason to put the closing tag for the group in the column after the last button - instead of just rendering it after the button (and maybe use a html_bee to combine button and group tag)?

>The problem is that the RENDER_CELL_START returns a bee, that is only processed later. So you must complete the radiobuttongroup processing only after the tableView has processed the last radio button. This is only possible within the next column.

But it should be enough to first render the html for the last button and then do the same for the closing group tag, then concatenating the two html strings for use as replacement htmlb bee.

[former_member181879]

> But it should be enough to first render the html

Yes, theorectically. Once you are at this expertise level, there are many solutions. But finding one simple elegant solution with which the kids will not first cut themselves is the trick here.

[Former Member]

Hi Brian,

Your solution look like great but what if I'd like the CHECKBOX to be BINDABLE?

What shoud I do ?

regards,

[Former Member]

Try the following code

Javascript code

function f_rad(objname, x)

{

var arry=objname.split("_");

var nxtname;

arry[2] = parseInt(arry[2]) + x;

nxtname = arry[0] + '_' + arry[1] + '_' + arry[2];

if (document.form1(objname).checked == true)

document.form1(nxtname).checked = false;

}

METHOD render cell start code

IF P_COLUMN_KEY = 'RAD_CNF'.

CREATE OBJECT L_RAD_GP.

L_ROW_INDEX = P_ROW_INDEX.

L_HTML_RADIO = '<input type="checkbox" name='.

CONCATENATE L_HTML_RADIO P_CELL_ID INTO L_HTML_RADIO.

CONCATENATE L_HTML_RADIO

'value="checked" '

'onclick=f_rad("'

INTO L_HTML_RADIO SEPARATED BY SPACE.

CONCATENATE L_HTML_RADIO

P_CELL_ID

'",1);>' INTO L_HTML_RADIO.

L_RAD_GP->ADD_HTML( HTML = L_HTML_RADIO ).

P_REPLACEMENT_BEE = L_RAD_GP.

ENDIF.

IF P_COLUMN_KEY = 'RAD_PCNF'.

CREATE OBJECT L_RAD_GP.

L_ROW_INDEX = P_ROW_INDEX.

L_HTML_RADIO = '<input type="checkbox" name='.

CONCATENATE L_HTML_RADIO P_CELL_ID INTO L_HTML_RADIO.

CONCATENATE L_HTML_RADIO

'value="checked" '

'onclick=f_rad("'

INTO L_HTML_RADIO SEPARATED BY SPACE.

CONCATENATE L_HTML_RADIO

P_CELL_ID

'",-1);>' INTO L_HTML_RADIO.

L_RAD_GP->ADD_HTML( HTML = L_HTML_RADIO ).

P_REPLACEMENT_BEE = L_RAD_GP.

ENDIF.

My checkboxes are on the 11th & 12th col adjacent to each other and I am sending 1 & -1 to the javascript to reference the adjacent checkbox.

p_cell_id will have values like p12table1_1_11 , p12table1_1_12.

checkbox code will look like

<input type="checkbox" name=p21table1_1_11 value="checked" onclick=f_rad("p21table1_1_11",1);>

Cheers,

Alwyn