8

RazorレイアウトにKendoUIグリッドがあり、コントローラーからデータをフェッチします。

このグリッドには、次の3つのDropDownListのセットが必要です。

ProductGroups、、Products_Services

実装したい動作は、グリッドに行を追加するときにProductGroups最初に選択すると、ProductsDropDownがGroupId（値）でフィルタリングされた製品リストで更新されます。次に、最初のものを選択して同様に、 （値）でフィルタリングされたサービスでドロップダウンをProduct更新します。ServicesproductId

私はこれを達成する方法がよくわかりません、誰かが私を助けてくれますか？

よろしくお願いします。

よろしくお願いします。

4

3 に答える 3

5

これがGridEditMode.InCellに対して行ったことです。クライアントとファンドがあり、各クライアントには独自のファンドのリストがあるため、ユーザーがクライアントを選択するときに、このクライアントに固有のファンドのみを表示する必要があります。

表示：剣道グリッドUIセットアップ

    c.ForeignKey(p => p.ClientId, Model.Clients, "Id", "ClientName")
      .Title("Client")
      .Width(100);
    c.ForeignKey(p => p.FundId, Model.Funds, "Id", "Description")
      .EditorViewData(new {funds = Model.Funds})
      .EditorTemplateName("FundForeignKeyEditor")
      .Title("Fund")
      .Width(100);
   })
   .Editable(x => x.Mode(GridEditMode.InCell))
   .Events(e => e.Edit("gridEdit"))

これで、ユーザーが[資金]をクリックすると、資金のデータソースのフィルタリングを実行する必要があります。これは、JavaScriptを使用した「gridEdit」イベントで実行します。このコードを上記のコードと同じビュー/ファイルに配置します

<script type="text/javascript">
    function gridEdit(e) {
        var fundDropDown = e.container.find("#FundId").data("kendoDropDownList");

        if (fundDropDown) {
            fundDropDown.dataSource.filter({ field: "ClientId", operator: "eq", value: e.model.ClientId });

</script>

Fundには「FundForeighKeyEditor」エディターテンプレートがあり、Views \ Shares\EditorTemplateフォルダーに追加する必要があります。任意の名前を使用できます。ファイルテンプレートの名前がEditorTemplateNameの名前と一致していることを確認してください。私の場合、EditorTemplateおよびFundForeighKeyEditor.cshtmlファイルとして「FundForeignKeyEditor」を使用しました

FundForeighKeyEditor.cshtml

@model FundViewModel

@(
        Html.Kendo().DropDownListFor(m => m)
            .BindTo((System.Collections.IEnumerable)ViewData["funds"])
            .DataTextField("Description")
            .DataValueField("Id")
)

これがFundViewModelで、ClientIdが含まれているので、フィルタリングを実行できます

public class FundViewModel
{
    public string Id { get; set; }
    public string ClientId { get; set; }
    public string Description { get; set; }
}
于 2012-12-27T21:34:19.660 に答える
4

最も簡単な方法は、カスケードドロップダウンリストを使用することです。http：//demos.kendoui.c​​om/web/dropdownlist/cascadingdropdownlist.html これら の各列のエディターテンプレート内にあります。

ポップアップ編集を使用している場合は、次のようにポップアップメニューをカスタマイズすることを検討してください： http ：//www.kendoui.c​​om/code-library/mvc/grid/custom-popup-editor.aspx

インライン編集を使用している場合は、次のアプローチを使用してエディターテンプレートをカスタマイズする必要があります： http ：//docs.kendoui.c​​om/documentation/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates

InCellを使用している場合-それは不可能だとだけ言っておきましょう。

于 2012-09-22T10:47:48.977 に答える
2

これは、インライン編集モードで機能します。私はまだ他の人を試していません。

最初のドロップダウンの変更イベントに関連付け、ターゲットドロップダウンを見つけて、そのデータソースを変更します。data-selector-typeは、選択を容易にするためにカスケードチェーンの各ドロップダウンに追加する属性です。

function clientDropDownEditor(container, options) {           
  var clientCombo = $('<input  id="client' + options.uid + '"  data-selector-type="client" data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
      .appendTo(container)
      .kendoComboBox({
          dataTextField: "Name",
          dataValueField: "Name",
          dataSource: {
              transport: {
                  read: "json/data/getClients"
              }
          },
          change: function (e) {
              // Find the element with the required selector type in the same TR
              var kendoComboSites = e.sender.element.closest("tr").find("[data-selector-type=site]").data("kendoComboBox");

              kendoComboSites.dataSource.transport.options.read.url = "json/data/GetClientSites/" + e.sender.element.val() + "/" + $("#Id").val();
              kendoComboSites.dataSource.read();
              kendoComboSites.refresh();

          }
      }).data("kendoAutoComplete");
}
于 2013-01-02T06:30:31.130 に答える