This is a migrated thread and some comments may be shown as answers.

How To Get Value of ComboBox?

5 Answers 128 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 31 May 2019, 11:56 AM

    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!

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 31 May 2019, 12:24 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Adam
Top achievements
Rank 1
answered on 31 May 2019, 12:35 PM

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

 

0
Rumen
Telerik team
answered on 31 May 2019, 01:25 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Adam
Top achievements
Rank 1
answered on 31 May 2019, 02:30 PM

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!

0
Rumen
Telerik team
answered on 31 May 2019, 03:21 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ComboBox
Asked by
Adam
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Adam
Top achievements
Rank 1
Share this question
or