Cascading drop down menu with editor template kendo grid mvc - kendo-ui

Question

I trying to implement a cascading down list with editor template i am not sure if kendo support it, i have a grid when in editing move i am trying to filter data base on select data from an editor template
grid is showing availablity time a user can work
e.g column Timefrom, TimeTo, status, could be the following
1.) availablity
2.) Unavailablity
3.) Holiday
availablity have different time template compare to Holiday and unavailablity
e.g
"Early/day" - 07.00 -18.00
"Long day" - 0700 - 22.30
"Late" - 12.00 - 22.00
"Night" - 19.00 - 21.00
"Twilight" - 18.00 - 04.00
Holiday/Unavailablity - half day morning
holiday/Unavailablity - half day afternoon
holiday/Unavailablity - evening
holiday/Unavailablity - whole day
what i want to achive when user click on edit mode, status column have a drop down with [Availablity - Unavilablity - Holiday ] after selecting the option availablity time template will be enable with the respective time template.
example when user click on Holiday drop down in edit mode only these option should be display on availablity Time Template column ("Early/day","Long day","Late","Night","Twilight")
below is a demo code simmilar concept to the main application Thanks
main page
#(Html.Kendo().Grid<Availablity>()
.Name("grid-availablity")
.Columns(columns =>
{
columns.Bound(c => c.Id);
columns.Bound(c => c.TimeFrom);
columns.Bound(c => c.TimeTo);
columns.Bound(c => c.Status);
columns.Bound(c => c.AvailablityTimeTemplate); // only testing purpose
columns.Command(command =>
{
command.Edit();
});
})
.DataSource(databinding => databinding.Ajax().PageSize(10).ServerOperation(false)
.Model(model => model.Id(availablity => availablity.Id))
.Read("GetAvailablityList","Availability")
.Update("Availablity_Update","Availability")
)
)
<script>
function filterTimeTemplate() {
return {
AvailablityTimeTemplate: $("#AvailablityTimeTemplate").val()
};
}
</script>
Editor Template
Status Template
#(Html.Kendo().DropDownList()
.Name("Status")
//.DataTextField("")
//.DataValueField("Id")
.OptionLabel("Change Status")
.BindTo(Enum.GetNames(typeof(Status)).ToList())
)
Time Template
#(Html.Kendo().DropDownList()
.Name("AvailablityTimeTemplate")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Change Time...")
//.DataTextField("")
// .DataValueField("")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadingData", "Availability")
.Data("filterTimeTemplate");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("Status")
)
classes and enum
public class Availablity
{
public string Id { get; set; }
public string TimeFrom { get; set; }
public string TimeTo { get; set; }
[UIHint("AvailablityStatus")]
public Status Status { get; set; }
[UIHint("TimeTemplate")]
public string AvailablityTimeTemplate { get; set; }
public List<Availablity> GetAvailablity()
{
return new List<Availablity>()
{
new Availablity(){ Id="001", TimeFrom="0700", TimeTo="18.00", Status=Status.Available},
new Availablity(){ Id="002", TimeFrom="0700", TimeTo="23.30", Status=Status.Available},
new Availablity(){ Id="002", TimeFrom="12.00", TimeTo="22.00", Status=Status.Available}
};
}
public List<string> GetTimeTemplateList(Status status)
{
List<string> TimeTemplateCollection = null;
if (status == Status.Available) {
TimeTemplateCollection = new List<string>(){
"Long day","Late","Night","Twilight"
};
} else {
TimeTemplateCollection = new List<string>(){
"Morning Half Day","Afternoon - Half Day ","Night","Whole Day"
};
}
return TimeTemplateCollection;
}
}
public enum Status
{
Available = 0,
UnAvailable = 1,
Holiday = 2
}
controller
public JsonResult GetCascadingData(Status availablityStatus)
{
var availablity = new Availablity();
var data = availablity.GetTimeTemplateList(availablityStatus);
return Json(data, JsonRequestBehavior.AllowGet);
}
public JsonResult GetAvailablityList([DataSourceRequest] DataSourceRequest request)
{
var availablity = new Availablity();
var data = availablity.GetAvailablity();
return Json(data.AsQueryable().ToDataSourceResult(request));
}

Answer 1

As your comment explain further, this is what you need to change
Time Template
#(Html.Kendo().DropDownList()
.Name("AvailablityTimeTemplate")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Change Time...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadingData", "Availability").Data("filterTimeTemplate");
})
.ServerFiltering(true);
})
//.Enable(false) should be removed
.AutoBind(false)
.CascadeFrom("Status")
)