Cascading DropDownList Child not updating

[C]

I have attempted to make my code as close to the example provided in the demos:
http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html

In the demo, when an item is selected from the parent I notice a server call is made to fill child DropDownList.
In my code, when an item is selected from the parent nothing happens. No call to the server is made. What is even stranger is that if I decide to click on the child DropDownList it then decides to make a call to the server. However, when that happens it does not send up the parent's ID as a parameter.

What am I doing wrong? Thoughts on how to debug this?

<div style="float: left; margin-right: 10px">

    <input id="calendars" />

</div>

<div style="float: left; margin-right: 10px">

    <input id="periods" />

</div>

<div class="clearfix"></div>

$(document).ready(function () {

    $("#calendars").kendoDropDownList({

        optionLabel: "Select calendar...",

        dataTextField: "CalendarText",

        dataValueField: "CalendarCode",

        dataSource: {

            type: "json",

            serverFiltering: true,

            transport: {

                read: "http://www.someurl.com/AppName/SomeArea/SomeController/GetCalendars"

            }

        }

    });

 

    var periods = $("#periods").kendoDropDownList({

        autoBind: false,

        cascadeFrom: "calendars",

        optionLabel: "Select period...",

        dataTextField: "PeriodCode",

        dataValueField: "PeriodCode",

        dataSource: {

            type: "json",

            serverFiltering: true,

            transport: {

                read: "http://www.someurl.com/AppName/SomeArea/SomeController/GetPeriods"

            }

        }

    }).data("kendoDropDownList");

});

[C]

Sigh... I noticed that I posted in the MVC section and not Kendo UI Web section.