Telerik MVC Grid Master Dettaglio Cascate a cascata

Question

Sto utilizzando un dettaglio master di Telerik MVC Grid su due livelli.

• Il primo livello contiene un menu a discesa di clienti e alcuni dati misc.
• Il secondo livello contiene un menu a discesa di automobili collegate al cliente al primo livello e alcuni dati misc.

Ora sto utilizzando una colonna chiave esterna per mostrare i menu a discesa di auto e clienti. Come può il secondo menu a tendina essere filtrato dal cliente al primo livello?

Codice:

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

Sto pensando che il codice potrebbe comportare alcuni javascript sull'evento OnDetailViewExpand, ma non riesco a capire cosa. L'unica soluzione che ho ora è dividere la griglia in viste separate e creare combobox cascasing lì.

Answer 1

Purtroppo non posso commentare ancora i post per chiarire alcuni fatti sulla tua domanda. Farò alcune supposizioni nella mia risposta in modo da poter calcolare l'esatta natura del problema. Hai due classi di modelli una per ogni griglia ClientsModel e CarModel. Stai filtrando la griglia (seconda) di CarModel con i campi della griglia (prima) di ClientsModel.

Non si è limitato a un solo parametro (< = ClientID =>) nell'associazione selezionata. È possibile utilizzare altri campi dalla classe ClientsModel allo stesso modo di ClientID.

Codice

Esempio:

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

Ecco un esempio di lavoro con i dati finta che illustra il metodo di cui sopra:

classe Client

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

Class Car

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

View

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

Come si può vedere dall'esempio Sto anche passando un parametro città così come un ClientId durante l'associazione della griglia.

Fammi sapere se ho perso qualcosa.

Answer 2

È corretto che sarà necessario farlo con javascript e si tratta di poter filtrare le auto da parte dei clienti. Telerik ti permette di aggiungere parametri aggiuntivi usando l'argomento "e.data" per la maggior parte dei loro controlli.Così, per esempio, se si voleva per filtrare un elenco City sulla base di uno stato di selezione del CSHTML sarebbe simile a questa:

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

Il javascript sarebbe simile a questa:

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

Niente da complesse, creare cliente event onEdit, puoi trovare sample su telerik demo, che dopo aver creato una volta il client scrivi il dropedown selection change change code che filtra i dati per il tuo dropdown. per farlo suggerirei di chiamare ajax e inserire HTml per il menu a discesa. Se hai ancora dei dubbi, fammi sapere che lo spiegherò nei dettagli. Se davvero trovi questa risposta migliore o appropriata, votala ... ti aiuterà ...