Pass tableView cell value into Javascript

[Former Member]

Hi, BSP gurus,

I'm stuck now and really need your help. What I'm trying to do is to retrieve a cell value from a selected tableView column, and then pass the value to a JavaScript function (GetGraphic(e0)). The JS calls another controller (c_map_track.do) and launch a new window. Everything else works fine except that the line "document.getElementByName(MATNR)" doesn't work. Do you have any idea what's the correct command to get the cell value? Any hints will be greatly appreciated and rewarded with points. Here is my code.

Javascript:

function GetGraphic(e0) {

var var0 = e0.value;

var WFeatures='top=200, left=450, width=550, height=550, resizable=yes, scrollbars=yes';

var nextpageurl = "c_map_track.do?lv_material=" + var0;

Results = new Array();

Results = window.open(nextpageurl, "", WFeatures);

}

.....

View:

<htmlb:tableViewColumns>

<htmlb:tableViewColumn columnName = "GRAPHICS"

tooltipColumnKey = "<%= otr(zsrm/graphics) %>"

type = "user"

title = "<%= otr(zsrm/graphics) %>"

horizontalAlignment = "CENTER" >

<htmlb:image src = "<%= CL_BSP_MIMES=>SAP_ICON( id = '@B_GRAF@' ) %>"

id = "$MATNR$"

onClientClick = "GetGraphic(document.getElementByName(MATNR))" />

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "MATNR"

tooltipColumnKey = "<%= otr(zsrm/material) %>"

title = "<%= otr(zsrm/material) %>"

sort = "server"

horizontalAlignment = "LEFT" >

</htmlb:tableViewColumn>

...

</htmlb:tableView>

[raja_thangamani · Accepted solution]

Specifing <i>document.getElementByName(MATNR)"</i> will not work. It will work if its normal inputfield, but its tableview. it must be something like tablviewname + row number + col number.

Let me know if you have any question.

<b>*reward each useful answer</b>

Raja T

[Former Member · Accepted solution]

Glad to hear from you, Raja,

Then what's the correct syntax in my case?

"tablviewname + row number + col number"

my tableview id = 'maptrack'.

what the row number and col number should be? They're dynamic.

Joanna

[raja_thangamani · Accepted solution]

The exact syntax is <i>TableviewID_RowNo_Column_No</i>.

<i>what the row number and col number should be? They're dynamic.</i>

-->Before I answer this pls let me know, on what event you want to capture the value & call another controller?

<b>*Reward each useful answer</b>

Raja T

[Former Member · Accepted solution]

Raja,

I know how to get the cell values in the DO HANDLE EVENT, but here I'd like to retrieve the cell value in the View so as to pass them to the JavaScript.

For instance, normally for an input field (eg id= "plant"), we do something like this in the view:

onClientClick = "GetGraphic(document.all.plant)"

But now I'd like to do the similar thing to pass a cell value, but just don't know the correct syntax.

Joanna

[Former Member · Accepted solution]

Also, Raja,

The reason why I'd like to use JavaScript to call another controller is becaue I'd like to launch a whole new window. I don't think you can launch a new window using the following commands in the DO HANDLE EVENT. I read anther thread talking about that too. Correct me if you think I'm wrong.

navigation->goto_page( c_map_track.do ).

navigation->next_page( c_map_track.do ).

Also navigation->set_parameter( ) doesn't seem to work for the controller.

Joanna

[raja_thangamani · Accepted solution]

Joanna,

you can achieve this in tableview but you need implement tableview iterator.

In your iterator class

Define a attribute:

ROW_REF / instance attribute/public/type ref to / DATA

in the IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_ROW_START method add the following line.

row_ref ?= p_row_data_ref.

in the IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START method add the following code.

data: v_cel_val type string.

CASE p_tableview_id.

WHEN 'your_tableview_ID'.

CASE p_column_key.

WHEN 'MATNR'.

CONCATENATE 'javascript:GetGraphic(' row_ref->matnr ')' into v_cel_val.

p_replacement_bee = cl_htmlb_inputfield=>factory(
id = p_cell_id
MAXLENGTH = '12'
size = '12'
WIDTH = '80'
value = row_ref->matnr
type = 'STRING'
onClientClick = v_cel_val
cellvalue = 'TRUE' ).

If you are not familiar with tableview iterators check out the following weblogs.

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

/people/thomas.jung3/blog/2004/09/15/bsp-150-a-developer146s-journal-part-xi--table-view-iterators

<b>*Reward each useful answer</b>

Raja T

Message was edited by:

Raja Thangamani

[Former Member · Accepted solution]

Raja,

Thanks for your reply. I got the syntax error on the following two parts:

row_ref->matnr (says you can't do reference like that)

onclientclick (says invalid parameter)

Here is the whole method:

METHOD if_htmlb_tableview_iterator~render_cell_start .

DATA: v_cel_val TYPE string.

CASE p_tableview_id.

WHEN 'maptrack_top'.

CASE p_column_key.

WHEN 'GRAPHICS'.

CONCATENATE 'javascript:GetGraphic(' row_ref->matnr ')' INTO v_cel_val.

p_replacement_bee = cl_htmlb_inputfield=>factory(

id = p_cell_id

maxlength = '12'

size = '12'

width = '80'

value = row_ref->matnr

type = 'STRING'

onclientclick = v_cel_val

cellvalue = 'TRUE' ).

ENDCASE.

ENDCASE.

Any more suggestions?

ENDMETHOD.

[raja_thangamani · Accepted solution]

Opps sorry abt that. Try this way to refer MATNR.

 FIELD-SYMBOLS: <fs> TYPE ANY ,
                   <l_field> TYPE ANY .

DATA: V_matnr TYPE string .

ASSIGN row_ref->* TO <fs>.

WHEN 'MATNR'.

ASSIGN COMPONENT p_column_key OF STRUCTURE <fs> TO <l_field>.

v_matnr = <l_field>.


CONCATENATE 'javascript:GetGraphic(' v_matnr ')' into v_cel_val. 


p_replacement_bee = cl_htmlb_inputfield=>factory(
id = p_cell_id
MAXLENGTH = '12'
size = '12'
WIDTH = '80'
value = v_matnr
type = 'STRING'
onClientClick = v_cel_val
cellvalue = 'TRUE' ).

<b>*Reward each useful answer</b>

Raja T

[Former Member · Accepted solution]

Raja,

It works now on the v_cel_val. Thank you very much. But the biggest issue now is that the error says:

The formal parameter 'onClientClick' doesn't exist.

I checked the factory() method and indeed doesn't see 'onClientClick'. Could it be something else?

Joanna

[raja_thangamani · Accepted solution]

YOu need to do simple work around.

CONCATENATE 'GetGraphic(' row_ref->matnr ')' into v_cel_val. 


p_replacement_bee = cl_htmlb_inputfield=>factory(
id = p_cell_id
MAXLENGTH = '12'
size = '12'
WIDTH = '80'
value = row_ref->matnr
showHelp = 'X'.
onValueHelp = v_cel_val
type = 'STRING'
cellvalue = 'TRUE' ).

It should solve your problem.

Let me know if not.

<b>*Reward each useful answer</b>

Raja T

[Former Member · Accepted solution]

Raja,

Below is my final code in the method and it got compiled without error.

But when I debug the application, the method doesn't get invoked, either pressing F1 or F4 or double click on the cell or line. How does the iterator get invoked? Also what should I do on the view side?

-

---

METHOD if_htmlb_tableview_iterator~render_cell_start .

DATA: v_cel_val TYPE string.

FIELD-SYMBOLS: <fs> TYPE ANY ,

<l_field> TYPE ANY .

DATA: v_matnr TYPE string .

ASSIGN row_ref->* TO <fs>.

CASE p_tableview_id.

WHEN 'maptrack_top'.

CASE p_column_key.

WHEN 'MATNR'.

ASSIGN COMPONENT p_column_key OF STRUCTURE <fs> TO <l_field>.

v_matnr = <l_field>.

CONCATENATE 'javascript:GetGraphic(' v_matnr ')' INTO v_cel_val.

p_replacement_bee = cl_htmlb_inputfield=>factory(

id = p_cell_id

maxlength = '12'

size = '12'

width = '80'

value = v_matnr

type = 'STRING'

showhelp = 'X'

onvaluehelp = v_cel_val

CELLVALUE = 'TRUE' ).

ENDCASE.

ENDCASE.

ENDMETHOD.

-

---

tableView:

<htmlb:tableViewColumn columnName = "WERKS"

tooltipColumnKey = "<%= otr(zsrm/plant) %>"

title = "<%= otr(zsrm/plant) %>"

sort = "server"

horizontalAlignment = "LEFT" >

</htmlb:tableViewColumn>

[Former Member · Accepted solution]

Sorry, here is the view for MATNR field. Should I specify onClientClick or onClick? but they don't make sense here, do they?

<htmlb:tableViewColumn columnName = "MATNR"

tooltipColumnKey = "<%= otr(zsrm/material) %>"

title = "<%= otr(zsrm/material) %>"

sort = "server"

horizontalAlignment = "LEFT" >

</htmlb:tableViewColumn>

[raja_thangamani · Accepted solution]

In the view you shd have something like below:

    <htmlb:tableView id               = "tv"
                     headerText       = "Title"
                     width            = "100"
                     headerVisible    = "true"
                     design           = "alternating"
                     visibleRowCount  = "8"
                     fillUpEmptyRows  = "true"
                     showNoMatchText  = "true"
                     filter           = "server"
                     sort             = "server"
                     onRowSelection   = "MyEventRowSelection"
                     selectionMode    = "SINGLESELECT"
                     selectedRowIndex = "<%=selectedRow %>"
                     table            = "<%= your_table %>"
                     iterator         = "<%=your_iterator %>" />

Raja T

[Former Member · Accepted solution]

You're awesome, Raja. It works now. Thank you very much for your help. You have a good day.

Joanna