Telerik MVC Grid Master Ayrıntısı Basamaklı Düşmeler

Question

İki kademede bir ana-detay Telerik MVC Grid kullanıyorum.

• İlk düzey, Müşteriler ve bazı yanlış veriler için bir açılır menü içerir.
• İkinci seviye, müşteriye ilk seviyede ve bazı yanlış verilerle bağlantılı olan Arabalar açılır listesini içerir.

Şimdi, otomobillerin ve istemcilerin açılır listelerini göstermek için bir yabancı anahtar sütunu kullanıyorum. İkinci açılır menü müşterinin ilk seviyesinde nasıl filtrelenebilir?

Kodu:

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

Ben kodu OnDetailViewExpand olaya bazı javascript dahil olabilir, ama dışarı neyi bilemiyorum ki düşünüyorum. Şu an sahip olduğum tek çözüm, ızgarayı ayrı görünümlere bölmek ve burada kasetleme combobox'ları oluşturmak.

Answer 1

Maalesef, sorunuzla ilgili bazı gerçekleri açıklığa kavuşturmak için bu yayına henüz yorum yazamıyorum. Cevabımla ilgili bazı varsayımlar yapacağım, böylece sorunun tam doğasını inceleyelim. Her grid ClientsModel ve CarModel için iki model sınıfınız var. CarModel (ikinci) ızgarasını, ClientsModel (ilk) kılavuzundaki alanlarla filtreliyorsunuz.

Seçtiğiniz ciltlemede yalnızca bir (< = ClientID =>) parametresiyle sınırlı değilsiniz. ClientsModel sınıfından diğer alanları ClientID ile aynı şekilde kullanabilirsiniz.

Örnek Kod:

Burada

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

yukarıda bahsedilen yöntemi göstermektedir sahte verileri ile çalışan bir örnek aşağıda verilmiştir:

Müşteri Sınıf

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

araba sınıfı

public class Car 
{ 
    public string Make { get; set; } 
    public string Model { get; set; } 
    public int Year { get; set; } 
    public string Color { get; set; } 
} 

HomeController Eğer ızgara bağlama yaparken ben de bir clientid yanı sıra İl parametresini geçiyorum örnekten görebileceğiniz gibi

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

Görünüm

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

. Bir şey özlediysem haberim olsun.

Answer 2

Bunu javascript ile yapmanız gerekeceğinden ve araçları müşterilere göre filtreleyebilmeniz önemlidir. Telerik, kontrollerinin çoğunda "e.data" argümanını kullanarak ek parametreler eklemenizi sağlar.

<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 şu şekilde görünecektir: karmaşık

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

Hiçbir şey, istemci oluşturmak Yani örneğin size CSHTML şöyle görünür bir seçme durumunu temel alan şehir listesine filtre istiyorsa event onEdit, telerik demoda örnek bulabilirsin, bir kez oluşturduktan sonra, siz araç açılırken veriyi filtreleyecek olan dropedown seçim değişikliği olay kodunu yazınız. Bunu yapmak için ajax'ı çağırmanızı ve açılırsa HTml'yi eklemenizi öneririm. Eğer bana bildirmekten de şüphe duyuyorsan, onu ayrıntılı olarak açıklayacağım. Bu cevabı en iyi ya da uygun buluyorsanız lütfen oy verin ... yardımcı olacaktır ...