Telerik MVC Grid Master详细级联下拉列表

Question

我在两个层面上使用了Master-detail Telerik MVC Grid.

• 第一级包含客户下拉和一些misc数据.
• 第二级包含在第一级链接到客户的汽车下拉和一些misc数据.

我现在使用外键列来显示汽车和客户的下拉列表.如何在第一级过滤第二个下拉列表？

码:

@(Html.Telerik().Grid<Models.ClientsModel>()
        .Name("Grid")
        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
        .DataKeys(keys => keys.Add(c => c.ClientLineID))
        .Columns(columns =>
        {
            columns.ForeignKey(o => o.ClientID, (System.Collections.IEnumerable)ViewBag.Client, "ClientID", "Name")
                                                   .Width(330)
                                                   .Title("Client");
            columns.Command(commands =>
                {
                    commands.Edit().ButtonType(GridButtonType.ImageAndText);
                    commands.Delete().ButtonType(GridButtonType.ImageAndText);
                }).Width(250);
        })
        .DetailView(car => car.ClientTemplate(

            Html.Telerik().Grid<Delta.Models.CarModel>()
                        .Name("Car_<#= ClientID #>")
                        .DataKeys(keys => keys.Add(c => c.LineID))
                        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
                        .DataBinding(dataBinding =>
                        {
                            dataBinding.Ajax()
                                .Select("_CarLineIndex", "Client", new { id = "<#= ClientID #>" })
                                .Insert("_CarLineCreate", "Client", new { id = "<#= ClientID #>" })
                                .Update("_CarLineUpdate", "Client")
                                .Delete("_CarLineDelete", "Client");
                        })
                        .Columns(columns =>
                                {
                                    columns.ForeignKey(o => o.CarID, (System.Collections.IEnumerable)ViewBag.Cars,
                                    "CarID", "No")
                                                   .Width(500)
                                                   .Title("Car");
                                    columns.Command(commands =>
                                    {
                                        commands.Edit().ButtonType(GridButtonType.ImageAndText);
                                        commands.Delete().ButtonType(GridButtonType.ImageAndText);
                                    }).Width(200);
                                })
                        .Editable(editing => editing => editing.Mode(GridEditMode.InLine))
                        .Scrollable(c => c.Height("auto"))
                        .Resizable(resizing => resizing.Columns(true))
                        .Reorderable(reorder => reorder.Columns(true))
                        .KeyboardNavigation()
                        .Footer(false)
                        .ToHtmlString()
            ))
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("_ClientIndex", "Client")
                .Insert("_ClientCreate", "Client")
                .Update("_ClientUpdate", "Client")
                .Delete("_ClientDelete", "Client");
        })
        .Scrollable(c => c.Height("auto"))
        .Editable(editing => editing.Mode(GridEditMode.InLine))
        .Pageable(o => o.PageSize(50))
        .Filterable()
        .KeyboardNavigation()
        .Groupable())

我认为代码可能涉及一些关于OnDetailViewExpand事件的javascript ,但我无法弄清楚是什么.我现在唯一的解决方案是将网格拆分为单独的视图,并在那里构建级联组合框.

Answer 1

不幸的是，我无法对帖子发表评论，以澄清有关您问题的一些事实。我将在回答中做出一些假设，以便我们能够弄清楚问题的确切性质。您有两个模型类，每个网格对应一个 ClientsModel 和 CarModel。您正在使用 ClientsModel（第一个）网格中的字段过滤 CarModel（第二个）网格。

您的选择绑定中不仅限于一个（<= ClientID =>）参数。您可以像使用 ClientID 一样使用 ClientsModel 类中的其他字段。

示例代码：

dataBinding.Ajax().Select("_CarLineIndex", "Client", new { id = "<#= ClientID #>", city = "<#= City #>" })

这是一个使用模拟数据的工作示例，说明了上述方法：

客户类别

public class Client
{
    public int ClientId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string City { get; set; }
}

汽车类

public class Car
{
    public string Make { get; set; }
    public string Model { get; set; }
    public int Year { get; set; }
    public string Color { get; set; }
}

家庭控制器

[GridAction]
public ActionResult _Index()
{
    Client c1 = new Client() { ClientId = 1, City = "Boston", FirstName = "Ted", LastName = "Boder" };
    Client c2 = new Client() { ClientId = 2, City = "New York", FirstName = "Chris", LastName = "Tobb" };
    Client[] clients = {c1, c2};
    return View(new GridModel(clients));
}

[GridAction]
public ActionResult _Cars(int ClientId, string City)
{
    Car c1 = new Car() { Color = "Yellow", Make = "Ford", Model = "Mustang", Year = 2012 };
    Car c2 = new Car() { Color = "Black", Make = "Toyota", Model = "Camry", Year = 2010 };
    Car[] cars = { c1, c2 };
    return View(new GridModel(cars));
}

看法

@(Html.Telerik().Grid<Client>()
    .Name("Clients")
    .Columns(columns =>
    {
        columns.Bound(o => o.FirstName);
        columns.Bound(o => o.LastName);
        columns.Bound(o => o.City);
    })
    .DetailView(clientDetailView => clientDetailView.ClientTemplate(
         Html.Telerik().Grid<Car>()
         .Name("ClientDetails_<#= ClientId #>")
         .Columns(columns =>
         {
             columns.Bound(c => c.Make);
             columns.Bound(c => c.Model);
             columns.Bound(c => c.Year);
             columns.Bound(c => c.Color);
          })
          .DataBinding(db2 => db2.Ajax().Select("_Cars", "Home", new { ClientID = "<#= ClientId #>", City = "<#= City #>" }))
          .Pageable()
          .Sortable()
          .ToHtmlString()
    ))
    .DataBinding(db1 => db1.Ajax().Select("_Index", "Home"))
    .Pageable()
    .Sortable()
    .Filterable()
)

正如您从示例中看到的，在绑定网格时我还传递了 City 参数以及 ClientId。

如果我错过了什么，请告诉我。