Telerik MVC Grid Master Detail Cascading Dropdowns

Question

Я использую master-detail 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()) 

Я имею в виду, что код может включать в себя некоторые JavaScript на OnDetailViewExpand событие, но я не могу понять, что. Единственное решение, с которым я столкнулся сейчас, - это разделить сетку на отдельные виды и создать там каскадные комбобокс.

Answer 1

К сожалению, я не могу комментировать сообщения, чтобы уточнить некоторые факты о вашем вопросе. Я сделаю некоторые предположения в своем ответе, чтобы мы могли определить точный характер проблемы. У вас есть два класса моделей по одному для каждой сетки ClientsModel и CarModel. Вы фильтруете сетку CarModel (вторая) с полями из сетки ClientsModel (первая).

Вы не ограничены только одним параметром (< = ClientID =>) в своей привязке выбора. Вы можете использовать другие поля из класса ClientsModel так же, как и ClientID.

Пример кода:

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

Вот рабочий пример с макетом данных, которая иллюстрирует метод, упомянутый выше:

Класс Client

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

Ничего к сложному, создавать клиент event onEdit, вы можете найти образец демоверсии telerik, чем после того, как созданный клиент запишет выпадающий код события изменения выбора, который будет фильтровать данные для выпадающего списка автомобилей. для этого я предлагаю вам позвонить ajax и вставить HTml для выпадающего списка. Если вы все еще сомневаетесь, сообщите мне, я объясню это подробно. Если вы действительно найдете этот ответ наилучшим или подходящим, проголосуйте за него ... это поможет ...