Telerik MVC Grid Master Detail Despliegues en cascada

Question

Estoy utilizando un Telerik MVC Grid en dos niveles.

• El primer nivel contiene un menú desplegable de Clientes y algunos datos misceláneos.
• El segundo nivel contiene un menú desplegable de Autos que están vinculados al cliente en el primer nivel y algunos datos misceláneos.

Ahora estoy usando una columna de clave externa para mostrar las listas desplegables de automóviles y clientes. ¿Cómo puede el segundo menú desplegable ser filtrado por el cliente en el primer nivel?

Código:

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

estoy pensando que el código podría implicar algún javascript en caso OnDetailViewExpand, pero no puedo averiguar qué. La única solución que tengo ahora es dividir la grilla en vistas separadas y construir cajas combinadas de castración allí.

Answer 1

Lamentablemente no puedo comentar en las publicaciones aún para aclarar algunos hechos sobre su pregunta. Voy a hacer algunas suposiciones en mi respuesta para que podamos resolver la naturaleza exacta del problema. Tiene dos clases de modelo, una para cada cuadrícula ClientsModel y CarModel. Está filtrando la cuadrícula CarModel (segunda) con campos de la cuadrícula ClientsModel (first).

No tiene restringido solo un parámetro (< = ClientID =>) en su enlace de selección. Puede usar otros campos de la clase ClientsModel de la misma manera que ClientID.

Código

muestra:

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

Aquí está un ejemplo de trabajo con los datos de maqueta que ilustra el método mencionado anteriormente:

clase de cliente

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

Clase de coche

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

Ver

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

Como se puede ver en el ejemplo también estoy pasando un parámetro de la ciudad, así como una ClientId al enlazar la red.

Avísame si me perdí de algo.

Answer 2

Tiene toda la razón de que tendrá que hacer esto con javascript, y se trata de poder filtrar los coches por los clientes. Telerik le permite agregar parámetros adicionales utilizando el argumento "e.data" para la mayoría de sus controles.Así, por ejemplo, si desea filtrar una lista de ciudades en base a un estado de selección de la CSHTML se vería así:

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

El Javascript se vería así:

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

Nada a lo complejo, cree cliente evento onEdit, puede encontrar una muestra en la demostración de telerik, que una vez que el cliente haya creado la opción de caída de datos, cambie el código de evento que filtrará los datos para su menú desplegable. para hacer esto, le sugiero que llame a ajax e inserte HTml para el menú desplegable. Si aún tiene dudas, hágamelo saber en detalle. Si realmente encuentra esta respuesta mejor o más conveniente, vótela ... ayudará ...