How To Get Value of ComboBox?

6 posts, 0 answers
  1. Adam
    Adam avatar
    5 posts
    Member since:
    May 2019

    Posted 31 May Link to this post

        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!

  2. Rumen
    Admin
    Rumen avatar
    14011 posts

    Posted 31 May Link to this post

    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.
  3. Adam
    Adam avatar
    5 posts
    Member since:
    May 2019

    Posted 31 May in reply to Rumen Link to this post

    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

     

  4. Rumen
    Admin
    Rumen avatar
    14011 posts

    Posted 31 May Link to this post

    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.
  5. Adam
    Adam avatar
    5 posts
    Member since:
    May 2019

    Posted 31 May in reply to Rumen Link to this post

    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!

  6. Rumen
    Admin
    Rumen avatar
    14011 posts

    Posted 31 May Link to this post

    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.
Back to Top