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（第二个）网格。

您的选择绑定中不仅限于一个（＆lt; = ClientID =＆gt;）参数。您可以像使用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; }
}

的HomeController

[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。

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

Answer 2

你是正确的，你需要用javascript做这件事，这是一个能够由客户过滤汽车的问题。 Telerik允许您使用“e.data”参数为其大多数控件添加其他参数。因此，例如，如果您想根据选择状态过滤城市列表，CSHTML将如下所示：

<td valign="top">
        @(Html.Telerik().DropDownListFor(m => m.State)
        .Name("State")
        .ClientEvents(events => events.OnChange("State_Change"))
        .BindTo(new SelectList(Model.GetStates()))
         .HtmlAttributes(new { style = string.Format("width:{0}px", 160) })
     )
 </td>

 <td valign="top">
     @(Html.Telerik().AutoCompleteFor(m => m.City)
         .Name("City")
         .Encode(false)
         .ClientEvents(events => {
             events.OnDataBinding("City_AutoComplete");
     })
     .DataBinding(a => a.Ajax().Select("CityList", "Location"))
     .AutoFill(true)
     .HighlightFirstMatch(true)
     .HtmlAttributes(new { style = string.Format("height: 17px; width:{0}px", 250) })
     )
 </td>

javascript看起来像这样：

function City_AutoComplete(e) {
    //pass state as an additional parameter here to filter
    //this would be your customer for cars list
    e.data = $.extend({}, e.data, { state: $("#State").val() });
}

function State_Change(e) {
    //reset when the parent list selection changes
    $('#City').data('tAutoComplete').text('');
    $('#City').data('tAutoComplete').value('');
}

Answer 3

无需复杂，创建客户端事件onEdit，您可以在telerik演示中找到示例，而不是在创建客户端之后写下dropedown选择更改事件代码，该代码将为您的汽车下拉列表过滤数据。要做到这一点，我建议你调用ajax并插入HTml下拉列表。如果你还有疑问，请告诉我，我会详细解释。如果你真的觉得这个答案最好或最合适的话请投票吧......这会有所帮助......

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

3 个答案: