cascading dropdown inside kendo grid not working -

i have kendo grid cascading drop down using editor template.problem here when editing drop down showing blank when click on drop down rest functionality working fine.please me on why happening this.

 @(html.kendo().grid(model.locations)                                             .name("grid")                                                     .htmlattributes(new { style = "min-height:400px" })                                             .columns(columns =>                                             {                                                 columns.command(command => { command.edit().htmlattributes(new { type = "button", @class = "btn btn-primary button" }); }).width(100);                                                 columns.bound(p => p.locationid).width(140).hidden(true);                                                 columns.bound(p => p.locationname).width(140);                                                 columns.bound(p => p.countryid).editortemplatename("countrynames").title("countryname").clienttemplate("#:countryname#").width(150);                                                 columns.bound(p => p.stateid).editortemplatename("statenames").title("statename").clienttemplate("#:statename#").width(150);                                                 columns.bound(p => p.isactive).width(100);                                             })                                              .editable(editable => editable.mode(grideditmode.inline))                                             .pageable()                                             .navigatable()                                             .sortable()                                             .scrollable()                                             .groupable()                                             .datasource(datasource => datasource                                             .ajax()                                             .pagesize(20)                                             .serveroperation(false)                                             .events(events => { events.error("error_handler"); events.requestend("onrequestend"); })                                             .model(model => { model.id(p => p.locationid); model.field(p => p.locationid).editable(false); })                                             .update(update => update.action("update_location", "administration"))                                              )                                         )       @using system.collections @model system.int16?  @(html.kendo().dropdownlist() .name("countryid") .autobind(false) .datatextfield("countryname") .datavaluefield("countryid") .datasource(source =>  {      source.read(read => { read.action("", "").data("filterstate"); }).serverfiltering(true);  }) .bindto((ienumerable)viewdata["countries"]) ) <script>     function filterstate() {         return {             countryid: $("#countryid").val()         };     } </script>        @model int?  @(html.kendo().dropdownlist()     .name("stateid") .datatextfield("statename") .datavaluefield("stateid")     .datasource(source =>    {        source.read(read => { read.action("getgridstatelist", "administration").type(httpverbs.post).data("filterstate"); }).serverfiltering(true);    })    .enable(false)    .autobind(false)               .cascadefrom("countryid") ) <script>     function filterstate() {         debugger;         return {             countryid: $("#countryid").val()         };     } </script>