Disable dropdown Box

[Former Member]

Hi Experts,

I have the issue about Dropdown box disable. My requirement is i have one dropdown in my acreen and initially it should be in a disable mode. If user clicks the edit button, then the dropdown box will change to the Edit mode.

For disable the dropdown box there is no parameter available in HTMLB. so i serached in SDN and found th following thread.

I tried dhurairaj code from the above thread using javascript. ts working the dropdown is disabled now but still user able to select the data's from dropdown box.

But for my requirement if the dropdown is disable mode it should allow user's to select the values from on it. Im using MVC and can anybody help me on this?

Your helps will be appreciated,

Thanks in Advance.

[Former Member · Accepted solution]

Hi Nandini,

As I can see in your requirement the disabled property of the dropdown box keeps changing during the application lifetime. So we need to maintain the disabled property of the dropdown box in a variable somewhere either as a

1) local variable

2)application class variable

3)controller class variable or

4)model class variabe (I suggest this option)

Then by default this variable hold the value 'TRUE', since initially you want the dropdown box to be in disabled state.

During the edit button event, you need to change the value of this variable to 'FALSE', by doing so, the dropdown box gets

enabled due to the fact that we have binded this model variable to the disabled attribute of the drop down box.

Hope it helps!

Regards,

Maheswaran

[Former Member · Accepted solution]

Hi Mahesh,

Thanks for your reply.

I checked the layout using debug at runtime it holds the value disabled as true. but still the dropdown is not disabled.

what could be the issue? I searched BSP extension HTMLB documentation for this disable issue and i got the documentaion of dropdown list box HTMLB.

For disable property the documentaion is,

Use this attribute to determine whether the dropdown list box can be clicked on to trigger the select event.

So whats the use of this disable property? only for trigger the event or Disable the dropdown?

Im confused. Any one help me on this.

Thanks.

[Former Member · Accepted solution]

Please find the sample code below....

Layout.

<%

data: t_ddl_values type tihttpnvp,

lwa_ddl_value type line of tihttpnvp.

lwa_ddl_value-name = 'R'.

lwa_ddl_value-value = 'Red'.

append lwa_ddl_value to t_ddl_values.

lwa_ddl_value-name = 'G'.

lwa_ddl_value-value = 'Green'.

append lwa_ddl_value to t_ddl_values.

lwa_ddl_value-name = 'B'.

lwa_ddl_value-value = 'Blue'.

append lwa_ddl_value to t_ddl_values.

%>

<htmlb:dropdownListBox id = "ddl1"

nameOfKeyColumn = "NAME"

nameOfValueColumn = "VALUE"

disabled = "<%= disabled %>"

selection = "<%= selection %>"

table = "<%= t_ddl_values %>" >

Page Attributes:

disabled TYPE STRING

selection TYPE CHAR1 Single-Character Indicator

On Create

disabled = 'TRUE'.

Oninputprocessing

DATA: event TYPE REF TO cl_htmlb_event.

event ?= cl_htmlb_manager=>get_event( runtime->server->request ).

CASE event->id.

WHEN 'b1'.

disabled = 'FALSE'.

WHEN 'ddl1'.

DATA: data TYPE REF TO cl_htmlb_dropdownlistbox.

data ?= cl_htmlb_manager=>get_data(

request = runtime->server->request

name = 'dropdownlistbox'

id = 'ddl1'

).

IF data IS NOT INITIAL.

selection = data->selection.

ENDIF.

WHEN OTHERS.

ENDCASE.

I have used stateful BSP application with a page with flow logic to develop it.

Hope it helps.

Regards,

Maheswaran

[Former Member · Accepted solution]

Thanks Mahesh,

If i have the static input means layout itself i can delare as like you. But i have the data's from tables and it should be retrieved dynamically at the runtime. so i get the data's from controller class not with in the layout.

Anyway i tried Durairaj's code in separate BSP application and did some modifications. So now its working fine and the dropdown get disabled when user clicks the button. please see the durairaj's full code in that thread.

But for my requirement i need to disable the dropdown initially not after the button click event.

please have a look at the durairaj's code.

Based on his code, when user clicks the button, then the dropdown getting displayed.

htmlb : button text = "Press Me"

onClientClick = "javascript : SetDisabled ('DDLB2', 'true');"

so i want to use this code without the button event.

Thanks for the valuable replies.

Edited by: Nandini on Aug 18, 2009 3:44 PM

Edited by: Nandini on Aug 18, 2009 3:45 PM

[Former Member · Accepted solution]

Hi,

Some how i am not able to paste my sample code here!

I don't know what is the problem?

But the sample code is written in such a way that

1. The dropdownbox is disabled initially.

2. On click of the button it gets enabled.

The dropdownbox values are loaded from the internal table which is dynamically populated by the ABAP code.

This piece of code can be written anywhere in the application. But it should be visible to the layout.

You can shift that piece of code either in controller or model class or inside the oncreate method, and make sure during the loading of the page the values exists. Then it will work fine.

I am sorry there is a problem in pasting the entire code.

Hope it helps.

Maheswaran.

[Former Member · Accepted solution]

Thanks for the replies mahesh,

Everything is fine for me. i passed data from controller class and in browser it displays the data's in dropdown everything is ok.

Now initially it should be disabled. the "Disable" addition in the dropdown box is not working. so i tried with java script.

Did u looked at durairaj's code? Based on his code if the button clicked then the dropdown is disabled. but for me initially it should be disabled. So i got the code with button and i need to modify that code like without button event it should disable the dropdown.

So here only i got the problem. If you have time please have a look at durairaj's code.

I have the problem with java script only. not in BSP. So please try that code.

Im awaiting for your valuable reply.

Thanks sir..

[raja_thangamani · Accepted solution]

Nandini,

Disabling the Dropdown is very simple. Mahesh already mentioned this in one of the post here but it got side tracked due to where the dropdown list is populated.

<htmlb:dropdownListBox id = "ddl1"
nameOfKeyColumn = "NAME"
nameOfValueColumn = "VALUE"
disabled = "<%= model->dd_disabled %>"  " Here dd_disabled can have a value TRUE or FALSE based on your need 
                                                    "to disable or enable your DD
selection = "<%= model->selection %>"
table = "<%= model->t_ddl_values %>" >

In DO_INIT, initialise the model->dd_disabled = 'TRUE' "because by default you wanted to be disabled mode,

If you want to enable the DD based on the condition, you can the logic to set TRUE or FALSE in any of the events.

Raja

[Former Member · Accepted solution]

Thanks raja,

Its not working for me. I tried many times. I have input fields and its disabled perfectly by using the disabled parameter.

For dropdown box directly i passed the value like,

disabled = "TRUE"

But still still its not disabled. I used debug and everything. But i couldn't.

Thanks raja.

[Former Member · Accepted solution]

Experts,

now my doubt is if there is a option available for disable the dropdown using HTMLB disabled parameter means then why people are looking for a java script??

Can Anybody solve this issue please?

Thanks.

[raja_thangamani · Accepted solution]

Just I tried 'disabled' parameter and it works for me. You might want to check OSS note for this issue if your code is correct.

To answer your previous question: How to disable the DD by default using the JS. Here is the code. Just add this code after the button.

      <htmlb:button id = "DD_BUTTON"
                  text          = "Press Me"
                    onClientClick = "javascript:SetDisabled('DDLB2', 'true');" />
      <s-cript lang-uage="java-script"> "Remove the "-" in JS  code
   {
    document.getElementById('DD_BUTTON').click(); "Here DD_BUTTON is ID of my button.
  }
</s-cript>

Why people are looking for Javascript: To avoid the server eventing.

Hope this should help you.

Raja

Edited by: Raja Thangamani on Aug 18, 2009 1:07 PM

[Former Member · Accepted solution]

Thanks Raja,

But you used button event right? without button event is there any option to disable the dropdown.

Just based on dropdown id i need to disable it initially. your code has button event. Anyway im working with your code.

thanks for helping and very sorry for continuous questions.

Thanks.

[raja_thangamani · Accepted solution]

Yes the previous code was with eventing. Replace the previous JS code with below one (without event).

  <s-cript language="java-script">
   {
     <%--document.getElementById('DD_BUTTON').click();--%>
  SetDisabled('DDLB2', 'true')
  }
</s-cript>

Raja

Edited by: Raja Thangamani on Aug 18, 2009 1:48 PM

[Former Member · Accepted solution]

Hi raja,

still i have the problem with this issue. For testing purpose i developed one small BSP application with only one dropdown box.

I tried with some other systems and i got the same issue.

May be i missed something. Please have a look on my layout code and output using following link.

http://www.mypicx.com/08182009/BSP_Issue/

Thank you very much for your time.

Thanks again Raja.

[raja_thangamani · Accepted solution]

I saw the link, pls place the JS code after the Dropdown. It should solve the issue

For example:

 <htmlb:dropdownListBox id                = "DDLB2"
                             nameOfKeyColumn   = "NAME"
                             nameOfValueColumn = "VALUE"

                             table             = "<%= tab2 %>"
                             width             = "150" />
      <s-cript language="java-script">

   {
SetDisabled('DDLB2', 'true')
  }
</-script>

Raja

[Former Member · Accepted solution]

Hi Raja,

I changed the code but still the problem persists.

Anyway i ll consult with my basics team about this and let you know.

And thanks for the effort and thanks a lot for helping.

Thanks.

[raja_thangamani · Accepted solution]

What error do you get now? Is it JS error?

Raja

[Former Member · Accepted solution]

Raja,

I didnt get any error. but dropdown box is still enabled.

Thanks.

[Former Member · Accepted solution]

Hi Nandini,

In the screen shot of your code, I can see a attribute named "keepSelectedRow". Please remove it. It is not a attribute for dropdownlistbox.

and please remove the comments in between the code. I suggest you to apply the pretty printer on your code.

and try it with either using 'disabled' attribute or using with 'Javascript' code and not both.

If you have already done the above said things, then please proceed with the OSS notes.

Hope it helps!

Regards,

Maheswaran

Edited by: Maheswaran B on Aug 19, 2009 3:47 PM

[raja_thangamani · Accepted solution]

Nandini,

With just JS it didnt work in my system also... BUT below code works in my system. Hope it should in your system too..

<s-cript language="java-script">

  f-unction SetDisabled(elem,disable)
  {
  var ip = document.getElementById(elem);

  ip.disabled = disable ;
  ip.readOnly = disable;
  ip.className = 'urCoB2TxtDdl urCoB2Dsbl';
  ip.st = 'd';
  }

</s-cript>

Raja

[Former Member · Accepted solution]

Hi Raja,

I did a small change in your code and now its working fine.

Thanks all for the Efforts.

Thanks a lot.

[Former Member]

Hi,

You can check BSP application SBSPEXT_HTMLB and page DropdownListBox.bsp

Hope this may help you

[Former Member]

Hi Nandhini,

There is an attribute disabled for dropdownlist.Keep it as true.

Here is a sample code:

<htmlb:dropdownListBox id="estatus" disabled="TRUE" >
            <htmlb:listBoxItem key   = "select"
                               value = "Select" />
            <htmlb:listBoxItem key   = "Single"
                               value = "Single" />
            <htmlb:listBoxItem key   = "Committed"
                               value = "Committed" />
          </htmlb:dropdownListBox>

Hope thi shelps you.

Regards,

Rajani

[Former Member]

Thanks Rajani,

But Im using MVC and my code is,

dropdownListBox id = "addresslistbox"

nameOfKeyColumn = "address"

nameOfValueColumn = "address"

table = " table1

keepSelectedRow = "TRUE"

DISABLED = "TRUE"

selection = "= tab1sel "

Is there any other options Rajani?

Thanks.

[Former Member]

Hi Rajani thanks for your reply, But Im usimg MVC and my code is,

dropdownListBox id = "addresslistbox"

nameOfKeyColumn = "address"

nameOfValueColumn = "address"

table = " table1

keepSelectedRow = "TRUE"

DISABLED = "TRUE"

selection = "= tab1sel "

Is there any options?

[Former Member]

Hi Rajani thanks for your reply, But Im usimg MVC and my code is,

{dropdownListBox id = "addresslistbox" }

{nameOfKeyColumn = "address"}

{nameOfValueColumn = "address"}

{table = " table1}

{ keepSelectedRow = "TRUE"}

{DISABLED = "TRUE"}

{selection = "= tab1sel "}

Is there any options?