级联下拉菜单与编辑器模板kendo网格mvc

时间:2015-05-12 14:42:57

标签: kendo-ui kendo-grid kendo-asp.net-mvc kendo-treeview

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

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

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

可用性具有与假日和不可用性不同的时间模板

e.g “早/日” - 07.00 -18.00 “漫长的一天” - 0700 - 22.30 “迟到” - 12.00 - 22.00 “夜晚” - 19.00 - 21.00 “暮光之城” - 18.00 - 04.00

假日/不可用 - 半天早上 假期/不可用 - 半天下午 假期/不可用 - 晚上 假期/不可用 - 一整天

当用户点击编辑模式时,我想要实现的目标是,在选择可用性时间模板后,状态栏会显示[可用性 - 不可用性 - 假日]的下拉列表,并且将使用相应的时间模板启用。

例如,当用户在编辑模式下单击Holiday下拉时,这些选项应显示在可用性时间模板列(“早/日”,“长日”,“晚”,“夜”,“黄昏”)< / p>

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

主页

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

1 个答案:

答案 0 :(得分:0)

正如您的评论进一步解释,这是您需要更改的内容

时间模板

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