kendo-ui - 带有编辑器模板 Kendo 网格 mvc 的级联下拉菜单

Question

我试图用编辑器模板实现一个级联列表我不确定 kendo 是否支持它，我在编辑移动时有一个网格我试图根据编辑器模板中的选择数据过滤数据

网格显示用户可以工作的可用时间
例如，Timefrom、TimeTo、status 列可以是以下内容

1.) 可用性
2.) 不可用
3.) 假期

与假期和不可用相比，可用性具有不同的时间模板

例如
“早/天” - 07.00 -18.00
“漫长的一天” - 0700 - 22.30
“迟到” - 12.00 - 22.00
“夜” - 19.00 - 21.00
“暮光之城” - 18.00 - 04.00

假期/不可用 - 半天上午
假期/不可用 - 半天下午
假期/不可用 - 晚上
假期/不可用 - 全天

当用户单击编辑模式时，我想实现什么，状态列有一个下拉菜单 [Available-Unavilablity-Holiday] 选择选项后可用时间模板将使用相应的时间模板启用。

例如，当用户在编辑模式下单击假日下拉菜单时，只有这些选项应显示在可用时间模板列中(“早/天”、“长日”、“晚”、“夜”、“暮光之城”)

下面是与主应用程序概念相似的演示代码 谢谢

主页

@(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>

编辑器模板

状态模板

@(Html.Kendo().DropDownList()
.Name("Status")
//.DataTextField("")
//.DataValueField("Id")
.OptionLabel("Change Status")
.BindTo(Enum.GetNames(typeof(Status)).ToList())
)

时间模板

@(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")
)

类和枚举

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

正如您的评论进一步解释的那样，这是您需要更改的

时间模板

@(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")
)