5

マスター/ディテールの Telerik MVC Grid を 2 つのレベルで使用しています。

  • 最初のレベルには、顧客のドロップダウンといくつかのその他のデータが含まれています。
  • 第 2 レベルには、第 1 レベルの顧客にリンクされている車のドロップダウンといくつかのその他のデータが含まれています。

車とクライアントのドロップダウンを表示するために、外部キー列を使用しています。最初のレベルで顧客が 2 番目のドロップダウンをフィルタリングするにはどうすればよいですか?

コード：

@(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が含まれている可能性があると考えていますが、何がわかりません。私が今持っている唯一の解決策は、グリッドを別々のビューに分割し、そこにカスケード コンボボックスを構築することです。

4

3 に答える 3

1

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('');
}
于 2012-05-23T21:58:01.370 に答える
1

残念ながら、あなたの質問に関するいくつかの事実を明確にするために、まだ投稿にコメントすることはできません. 問題の正確な性質を理解できるように、回答でいくつかの仮定を立てます。グリッドの ClientsModel と CarModel ごとに 1 つずつ、2 つのモデル クラスがあります。ClientsModel (最初) グリッドのフィールドで CarModel (2 番目) グリッドをフィルタリングしています。

選択バインディングで 1 つの (<= ClientID =>) パラメーターに制限されているわけではありません。ClientsModel クラスの他のフィールドは、ClientID と同じ方法で使用できます。

サンプルコード:

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 も渡しています。

何か見逃した場合はお知らせください。

于 2012-05-23T21:49:13.900 に答える
0

複雑なことは何もありません。onEdit でクライアント イベントを作成します。telek デモでサンプルを見つけることができます。クライアントが作成された後、車のドロップダウンのデータをフィルター処理するドロップダウンの選択を変更するイベント コードを書き留めます。これを行うには、ajax を呼び出して、ドロップダウンに HTml を挿入することをお勧めします。それでも疑問がある場合は、お知らせください。詳しく説明します。この回答が本当に最適または適切であると思われる場合は、投票してください..役に立ちます...

于 2012-05-30T12:11:55.720 に答える