How could I Bind Dropdown which change value depending on textBox value

3 posts, 0 answers
  1. pinaki
    pinaki avatar
    3 posts
    Member since:
    Aug 2012

    Posted 16 Oct 2012 Link to this post

    I am successfully done cascading drop-down. But my requirement is to bind dropdown depend on the value of textbox.
    Can you please help me.

    My code snipe

    <td class="EditlableTD">
                                            @Html.LabelFor(model => model.ReferredBy)
                                        </td>
                                        <td class="EditTextBoxTD">
                                            <input type="text" id="R_Ranks" name="ReferredBy" class="k-textbox" />
                                           
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="EditlableTD">
                                            Rank
                                        </td>
                                        <td class="EditTextBoxTD">
                                        <script>

                           function filterRank() {
                               return {
                                   R_Ranks: $("#R_Ranks").val()
                                  };
                           }
                        
                        </script>  
                          @(Html.Kendo().DropDownList()
                                          .Name("Rank")
                                          .OptionLabel("Select Rank...")
                                          .DataTextField("Rk_Name")
                                          .DataValueField("Rk_InternalCode")
                                          .DataSource(source =>
                                          {
                                              source.Read(read =>
                                              {
                                                  read.Action("ShowSelectedRank", "Home")
                                                     .Data("filterRank");
                                              })
                                              .ServerFiltering(true);
                                          })
                                            .Enable(true)
                                            
                                            .AutoBind(false)
                                            //.CascadeFrom("BranchCode")
                                            .HtmlAttributes(new {style="width:200px;" })
                                            

                           )
    </td>
    </tr>

    It bind value first time depend on R_Ranks text box value. But 2nd time text change does not effect the dropdown bind.
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 30 Oct 2012 Link to this post

    Hello,

    <input id="target" type="text" value="CountryName" />
     
     @(Html.Kendo().ComboBoxFor(model => model.StateID)
                        .Name("StateID")
              .Placeholder("--Select--")
                      .DataTextField("StateName")
                      .DataValueField("StateID")
    )

      $(document).ready(function () {
    $('#target').change(function() {
      BindStateCombo($(this).val());
    });
      });
     
     
    function BindStateCombo(CoutryText) {
     
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: 'Your BaseUrl Comes Here' + "Account/GetStateByCountry",
                        data: {
                            Value: CoutryText
                        }
                    }
                }
            });
     
            var ddl = $('#StateID').data("kendoComboBox");
            ddl.setDataSource(dataSource);
            ddl.refresh();
        }

    public JsonResult GetStateByCountry(string Value)
            {
               // Value is your textbox's Text/Value
                var dataitem = "Get Your State List";
     
                return Json(dataitem, JsonRequestBehavior.AllowGet);
            }

    This same solutions also wroked for DropDownList.

    Thanks,
    Jayesh Goyani
  3. Kendo UI is VS 2017 Ready
  4. Doug
    Doug avatar
    3 posts
    Member since:
    May 2015

    Posted 11 May in reply to Jayesh Goyani Link to this post

    Jayesh,

    I know this is a very old posted but I need a point of clarification.

    from your code snippet

                    read: {
                        url: 'Your BaseUrl Comes Here' + "Account/GetStateByCountry",
                        data: {
                            Value: CoutryText
                        }
                    }

     

    Shouldn't the "Value: CountryText" really by "Value: CountryName" so it matches the text input?

Back to Top