How To Get Value of ComboBox?

[Adam]

    Hi,

Wondering if you could help. I'm struggling to get a value from a ComboBox. I have the following ComboBox set up:

<sq8:ComboBox runat="server" ID="cboAgree" OnClientSelectedIndexChanged="onSelectedIndexChanged"><Items>
<sq8:ComboBoxItem runat="server" Text="Agree" Value="Agree"></sq8:ComboBoxItem>
<sq8:ComboBoxItem runat="server" Text="Disagree" Value="Disagree"></sq8:ComboBoxItem>
</Items>
</sq8:ComboBox>
<sq:BindableControl runat="server" TargetControlID="cboAgree" DataField="Agreement"></sq:BindableControl>

And the following JavaScript to get the value:

<script type="text/javascript">

Sys.Application.add_load(FormLoad)

 function FormLoad()
  {
    onSelectedIndexChanged(true);
  }

  function onSelectedIndexChanged(sender, eventArgs)
{

      var commentsGrid = document.getElementById("comms");

            commentsGrid.style.display = "none";

    var item = eventArgs.get_item();

    if (item == "Disagree") {
        commentsGrid.style.display = "block";
    } else {
        commentsGrid.style.display = "none";
    }
}


</script>

 

I get back the following error - "Uncaught TypeError: Cannot read property 'get_item' of undefined"

I have looked at the threads about getting ComboBox values on this forum but just can't seem to get this working.

When the value "Disagree" is selected from the combobox (id of the ComboBox is cboAgree) i want the grid to show. And when Agree is selected, i want the grid to disappear.

 

Could anyone steer me in the right direction? Thanks!

[Rumen]

Hi Adam,

The error comes from the call of the onSelectedIndexChanged function in the add_load (pageLoad()) event of the page where the combobox items are not available: 

Sys.Application.add_load(FormLoad)
            function FormLoad() {
                onSelectedIndexChanged(true);
            }

If you comment out onSelectedIndexChanged(true); in the FormLoad() function, the error will go away.

        <telerik:RadComboBox runat="server" ID="cboAgree" OnClientSelectedIndexChanged="onSelectedIndexChanged">
            <Items>
                <telerik:RadComboBoxItem runat="server" Text="Agree" Value="Agree"></telerik:RadComboBoxItem>
                <telerik:RadComboBoxItem runat="server" Text="Disagree" Value="Disagree"></telerik:RadComboBoxItem>
            </Items>
        </telerik:RadComboBox>
        <asp:TextBox runat="server" id="TextBox1"></asp:TextBox>
        <script type="text/javascript">

            Sys.Application.add_load(FormLoad)

            function FormLoad() {
              //  onSelectedIndexChanged(true);
            }

            function onSelectedIndexChanged(sender, eventArgs) {

                var commentsGrid = document.getElementById("TextBox1");

                commentsGrid.style.display = "none";

                var item = eventArgs.get_item();

                if (item == "Disagree") {
                    commentsGrid.style.display = "block";
                } else {
                    commentsGrid.style.display = "none";
                }
            }
</script>

Instead of calling onSelectedIndexChanged(true); you can replace this function with a check what is the default value of the combobox or just check whether the gird is visible or not.


Best Regards,
Rumen
Progress Telerik

[Adam]

Hi Rumen,

Thanks for the quick reply! With the Form Load part..do you mean moving

var commentsGrid = document.getElementById("comms");

commentsGrid.style.display = "none";

 

Into the function?

 

I'm not too sure how form loading works with these forms. I just want to make sure the grid and comboxboxes load correctly on the form.

i.e. the grid is hidden when the form loads. When the user selects either value, "Agree" or "Disagree" the grid, hides/shows.

The code doesn't give me any errors now but it's not behaving correctly.

Sorry, i'm quite new to this!

Adam

 

[Rumen]

Hi Adam,

Here is the code to hide and show the grid (in the particular example replaced by a textbox):

<telerik:RadComboBox runat="server" ID="cboAgree" OnClientSelectedIndexChanged="onSelectedIndexChanged">
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="Agree" Value="Agree"></telerik:RadComboBoxItem>
        <telerik:RadComboBoxItem runat="server" Text="Disagree" Value="Disagree"></telerik:RadComboBoxItem>
    </Items>
</telerik:RadComboBox>
<asp:TextBox runat="server" ID="TextBox1" Text="Think of this textbox as the grid, replace it with the grid in your project" Style="display: none;"></asp:TextBox>
<script type="text/javascript">

    function onSelectedIndexChanged(sender, eventArgs) {
        var commentsGrid = document.getElementById("TextBox1");

        var itemText = eventArgs.get_item().get_text();

        if (itemText == "Disagree") {
            commentsGrid.style.display = "none";
        } else {
            commentsGrid.style.display = "block";
        }
    }
</script>

When the user chooses Agree the textbox will be shown, when clicking Disagree, the textbox will go hidden.

Best Regards,
Rumen
Progress Telerik

[Adam]

Hi Rumen,

 

Thanks again!

This works now but like i said, when the form has loaded and i click to Disagree, the grid disappears but when i change the combobox value back to "Agree" the grid stays visible. Is there a way I can make the form disappear after load when the "Agree" value has been selected?

Thanks!

[Rumen]

Hello,

Just change the values of display setting:

  if (itemText == "Disagree") {
            commentsGrid.style.display = "";
        } else {
            commentsGrid.style.display = "none";
        }

If the grid should be shown initially also remove this style Style="display: none;" from its declaration.

Regards,
Rumen
Progress Telerik