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

ComboBox: onchange event does not fired for Numeric Values

4 Answers 261 Views

ComboBox

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

Suresh Babu asked on 17 Jul 2013, 03:00 PM

Hi,

The attached sample project is based on your combo box sample post along with other elements.

In this project combo box onchange event does not fired if it has numeric value. Below are details for the same.

             1. I have 2 combo boxes and 1 label in the attached project: Alphabet Combo, Numeric Combo and Selected Value:  Alphabet Combo has values: A-1, B-2, C-3, D-4 and Number Combo has values: 1-A, 2-B, 3-C, 4-D
             2. Select Alphabet combo by pressing letter 'A' or 'B' or 'C' or 'D' by using keyboard, onchange event fired and selected value and selected text will show on label control (working fine)

3. But I have done for Numeric Combo same as above, but it won't show selected value and selected text due to onchange event does not fired.

For testing,
    - Alphabet Combo:  Press 'A' by using keyboard and press Tab, it will show the selected value and text
    - Numberic Combo: Press '1' by using keyboard and press Tab, it wont show the selected value and text

Code for above requirement:
1) Alphabet Combo:
     @(Html.Kendo().ComboBox()
                      .Name("AlphabetCombo")
                      .Suggest(true)
                      .Filter("StartsWith").MinLength(0)
                      .HighlightFirst(true)
                      .Placeholder("Select fabric...")
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(new List<SelectListItem>() {
                           new SelectListItem() {
                            Text = "Select", Value = "0"
                          },
                          new SelectListItem() {
                            Text = "A-1", Value = "1"
                          },
                          new SelectListItem() {
                            Text = "B-2", Value = "2"
                          },
                          new SelectListItem() {
                            Text = "C-3", Value = "3"
                          },
                          new SelectListItem() {
                            Text = "D-4", Value = "4"
                          }
                      })
                     .SelectedIndex(0)
                     .Events(events =>
                      {
                          events.Change("Combo_Change");
                      })
                )

2) Numeric Combo:
      @(Html.Kendo().ComboBox()
                              .Name("SampleData2")
                      .Suggest(true)
                      .Filter("StartsWith").MinLength(0)
                      .HighlightFirst(true)
                      //.Placeholder("Select fabric...")
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(new List<SelectListItem>() {
                           new SelectListItem() {
                            Text = "Select", Value = "0"
                          },
                          new SelectListItem() {
                            Text = "1-A", Value = "1"
                          },
                          new SelectListItem() {
                            Text = "2-B", Value = "2"
                          },
                          new SelectListItem() {
                            Text = "3-C", Value = "3"
                          },
                          new SelectListItem() {
                            Text = "4-D", Value = "4"
                          }
                      })
                     .SelectedIndex(0)
                     .Events(events =>
                      {
                          events.Change("Combo_Change");
                      })
                )

3) Label to show selected value and text
   <b>Selected Value is : </b> <label id="lblSelectedValue" runat="server"></label>

4) OnChange Event: JavaScript code
      <script language="javascript" type="text/javascript">
        function Combo_Change(e) {
            var combo = e.sender;
            $('#lblSelectedValue').text(combo.value() + ', ' + combo.text());
        }
    </script>

Please help me to resolve the issue. Thanks in advance.

ComboBox: onchange event does not fired for Numeric Values

4 Answers, 1 is accepted