使用编辑器模板 kendo grid mvc 的级联下拉菜单

Question

我正在尝试使用编辑器模板实现层叠向下列表我不确定 kendo 是否支持它，我在编辑移动时有一个网格我正在尝试根据 select 过滤数据库来自编辑器模板的数据

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

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

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

例如 "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 - 半天上午 holiday/Unavailablity - 半天下午 holiday/Unavailablity - 晚上 holiday/Unavailablity - 全天

当用户单击编辑模式时，我想要实现的目标是，状态列在 select 选项可用性时间模板将随相应时间启用后，下拉菜单显示 [可用性 - 不可用 - 假日]模板。

示例，当用户在编辑模式下单击假期下拉菜单时，仅这些选项应显示在可用时间模板列中（"Early/day"、"Long day"、"Late"、"Night","Twilight")

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

主页

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

控制器

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

使用编辑器模板 kendo grid mvc 的级联下拉菜单

Cascading drop down menu with editor template kendo grid mvc

kendo-ui

kendo-treeview

kendo-grid

kendo-asp.net-mvc