cascading dropdownlist in mvc4

2 posts, 0 answers
  1. Imteyaz
    Imteyaz avatar
    3 posts
    Member since:
    Oct 2011

    Posted 28 Dec 2012 Link to this post

    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")
          )
  2.
  3. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top