cascading dropdownlist in mvc4

[Imteyaz]

Hello there. I am using kendo cascade dropdownlist. My requirement is that, when a user selects a value from Country dropdown, the State dropdown is being filtered from my controller. What I want is that, when a country has no state, the state dropdown should be replaced to a text box, so that, the user can stores his state name. 
If I am using normal dropdowns then I can manage through the ajax request that i suppose to make. but I am not able to figure it out how to handle it on the Kendo dropdowns.? 

Here is my code sample for what I am usning now.

<tr>

                <td valign="top" colspan="2">

                    <div style="float: left">

                        <em>*</em> @Html.LabelFor(model => model.CountryId)

                    <br />

                        @Html.Kendo().DropDownListFor(model => model.CountryId).BindTo(Model.AvailableCountries).Animation(true).HtmlAttributes(new { onchange = "populateState(this)", style = "width:250px;" })

 

                        <span id="states-loading-progress" style="display: none;">Wait...

                <img src='@Url.Content("~/Content/Images/ajax_loader_small.gif")' alt="Wait..." />

                        </span>

                    </div>

                    <div style="float: right">

                        @Html.LabelFor(model => model.PostalCode)

                        <br />

                        @Html.TextBoxFor(model => model.PostalCode, new { @class = "k-textbox", style = "width:100px;" })

                    </div>

                </td>

 

 

            </tr>

            <tr>

                <td valign="top">@Html.LabelFor(model => model.State)

                    <br />

                    <div id="ddlStates">

                        @(Html.Kendo().DropDownList()

      .Name("State")

                                // .OptionLabel("Select state...")

      .DataTextField("name")

      .DataValueField("id")

      .DataSource(source =>

      {

          source.Read(read =>

          {

              read.Route("GetStatesByCountryId")

                  .Data("CountryId")

                  .Type(HttpVerbs.Post); // This line serves to accept POST requests

          })

          .ServerFiltering(true);

      })

      .Enable(false)

      .AutoBind(false)

      .CascadeFrom("CountryId")

      )

[Atanas Korchev]

Hi,

You can handle the dataBound event of the second dropdownlist and hide it if its datasource is empty.

@(Html.Kendo().DropDownList()

      .Name("State")
      .Events(e => e.DataBound("onDataBound"))
      /* other configuration */

)

function onDataBound() {
  var dropdownlist = this;
  
  if (dropdownlist.dataSource.data().length == 0) {
     // the dropdownlist is empty so hide it

     $("#State").closest(".k-dropdown").hide();
  }
}



Regards,
Atanas Korchev
the Telerik team