KendoUI cascading drop-downs does not update after binding once

Question

I am using KendoUI cascading Drop-downs and it seems to be working fine for most part but it seems to have a little problem. However, I think it is a problem with my implementation NOT with the tool because on their Demo page here it seems to work fine. Also, I tried to follow the code exactly as it as to make sure that I do get the same behavior. Now, I am seeing following behavior:

• I select an option in parent drop down and then click on the child drop down then it calls the conroller action correctly
• It continues to do that as far as results for child dropdown are empty
• Once it gets some value to bind child drop-down with, it stops making any call to the controller despite of what I choose in parent drop-down or child-dropdown.

I am not sure why it happens. Following is my code snippet:

Controller code

[HttpGet]
public ActionResult FindAlignmentsByTeamId(int teamId)
{
    var teams = Client.GetAlignmentsByTeamId(teamId);
    return Json(teams, JsonRequestBehavior.AllowGet);
}

.cshtml code

@* Perent Dropbox *@

<tr>
    <td>EmployeeID</td>
    <td><b>@Model.EmployeeId</b></td>
</tr>
<tr>
    <td>Team</td>
    <td>
        @(Html.Kendo().DropDownList()
              .Name("Team")
              .DataTextField("TeamName")
              .DataValueField("TeamId")
              .DataSource(source => source.Read(read => read.Action("GetAllTeams", "Employee")))
        )
    </td>
</tr>

@* Child DropBox *@


@(Html.Kendo().DropDownList()
    .Name("Alignment")
    .DataTextField("AlignmentName")
    .DataValueField("AlignmentId")
    .DataSource(source => source.Read(read => read.Action("FindAlignmentsByTeamId", "Employee").Data("FilterAlignment"))
           .ServerFiltering(true)
    )
    .CascadeFrom("teamId")
    .AutoBind(false)
)

<script type="text/javascript">
    function FilterAlignment() {
        return {
            teamId: $("#Team").val()
        }
    };
</script>

I am not sure what happens after it is bound successfully with a value for the first time so that it has a reason to believe that now it does not have to be checking on any OnChange() events anymore? Any ideas?

Answer 1

The id of your parent DropDownList is "Team", not "teamId". You need to update your child DropDownList to cascade from the correct id:

@(Html.Kendo().DropDownList()
      .Name("Alignment")
      .DataTextField("AlignmentName")
      .DataValueField("AlignmentId"            
      .DataSource(source => source.Read(read => read.Action("FindAlignmentsByTeamId", "Employee").Data("FilterAlignment"))
                .ServerFiltering(true)
      )
      .CascadeFrom("Team")
      .AutoBind(false)
)