asp.net-mvc - Telerik MVC Grid Master Detail Cascading Dropdowns

Question

我在两个级别上使用主细节 Telerik MVC Grid。

第一级包含客户下拉列表和一些杂项数据。
第二级包含与第一级客户相关联的汽车下拉列表和一些杂项数据。

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

代码：

@(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，但我不知道是什么。我现在唯一的解决方案是将网格拆分为单独的视图并在那里构建级联组合框。

score 1 · Accepted Answer

不幸的是，我无法对帖子发表评论，以澄清有关您的问题的一些事实。我将在我的回答中做出一些假设，以便我们可以弄清楚问题的确切性质。您有两个模型类，每个网格 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。

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

score 1 · Accepted Answer

您是正确的，您需要使用 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('');
}

score 0 · Accepted Answer

Nothing to complex, create client event onEdit, you can found sample on telerik demo, than after once created client write down dropedown selection change event code that will filter data for you car dropdown. to do this I would suggest you to call ajax and insert HTml for dropdown. If you have still doubt than let me know I will explain it in detail. If you you really find this answer best or appropriate please vote it.. it will help...

asp.net-mvc - Telerik MVC Grid Master Detail Cascading Dropdowns

3 回答 3

Related

Reference