2

これが私のMVCビューコードです:-

<div id="reportsDb">
  <div id="grid"></div>
  <script type="text/x-kendo-template" id="template">
    <div class="toolbar" id="template" >
      <label class="Status-label" for="Status">Show reports by status:</label>
      <input type="search" id="Status" style="width: 150px"/>
    </div>
  </script>
  <script>
    $(document).ready(function () {
      var path = ""
      dataSource = new kendo.data.DataSource({

        transport: {
          read: {
            url: "@Url.Action("Report_Read", "Report")",
            dataType: "json",
            type: "Get",
            contentType: "application/json"
          }

        },

        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,

        pageSize: 10,
        schema: {
          model: {
            id: "RequestId",
            fields: {
              IPAddress: { type: "string" },
              RequestQuetime: { type: "date" },
              RequestPicktime: { type: "date" },
              RequestRespondTime: { type: "date" },
              StatusType: { type: "string" },
              RequestTimeDifference: { type: "datetime", format: "{0:hh:mm:ss}" },
              RequestPickDifference: { type: "datetime", format: "{0:hh:mm:ss}" }
            }
          }
        }
      });

      var grid =  $("#grid").kendoGrid({
        dataSource: dataSource,
        sortable: true,
        pageable: true,
        filterable: {
          extra: false,
          operators: {
            string: {
              startswith: "Starts with",
              eq: "Is equal to",
              neq: "Is not equal to"
            }
          }
        },
        toolbar: kendo.template($("#template").html()),
        height: 430,

        columns: [
          { field: "IPAddress", title: "IP address", width: 100, filterable: true },
          { field: "RequestQuetime", title: "Que time", width: 100, filterable: false },
          { field: "RequestPicktime", title: "Pick time", width: 110, filterable: false },
          { field: "RequestRespondTime", title: "Respond time", width: 100, filterable: false },
          { field: "StatusType", title: "status", width: 110, filterable: { ui: statusFilter } },
          { field: "RequestTimeDifference", title: "Time difference", width: 110, filterable: false },
          { field: "RequestPickDifference", title: "Pick difference", width: 110, filterable: false }
        ]
      });

      function statusFilter(element) {
        element.kendoDropDownList({
          dataSource: {
            transport: {
              read: {
                url: "@Url.Action("RequestStatus_Read", "Report")",
                dataType: "json",
                type: "Get",
                contentType: "application/json"
              }
            }
          },
          dataTextField: "Text",
          dataValueField: "Value",
          optionLabel: "--Select Value--"
        });
      }
    });
  </script>
</div>

以下はコントローラーのアクションメソッドです:-

public ActionResult Report_Read()
{
  return Json(_oRepository.GetReports().ToList(), JsonRequestBehavior.AllowGet);
}

StatusType フィールドにフィルタリングを適用したいので、このファイルをドロップダウンリストにバインドしました。

そして、私の問題は、ダウンロードからステータスの1つを選択してフィルタリングを実行しようとしているときに、何もしないことです。

私はこの例に従って働いています：

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

4

3 に答える 3

2

コードから、コントローラーの読み取りアクションを除いて、すべてが正常に見えます。グリッドのビューからフィルターを適用するときにコントローラーが呼び出されている場合、あなたの側で必要な唯一の変更は以下のとおりです。

public JsonResult Report_Read([DataSourceRequest] DataSourceRequest request)
{          
   return Json(_oRepository.GetReports().ToList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

編集：

Kendo.MVC を使用しない場合、フィルタリングには 2 つのオプションがあります。

オプション 1: クライアント側のフィルタリング
-> 読み取り時にすべてのデータを取得する必要があるため、フィルタリングが適用されるとすべてのデータが得られます。これは、データ ソースが大きくない場合に最適なオプションです。 .
-> まず、グリッドの filterMenuInit() をサブスクライブし、クライアント側のフィルタリング用に以下のスクリプトを追加する必要があると考えます。 コード：

filterMenuInit: function(e) {
  if (e.field == "name") {
    alert("apply Filter");
    var filter = []
    ... // Generate filters
    grid.dataSource.filter(filters);
  }
}

詳細な例:剣道の例から抽出

オプション 2: サーバー側のフィルタリング
-> よくわかりませんが、フィルタリングのオプションを探しているときに、以下の質問に出くわしました。でも、使えると思います。

JS フィドル サンプル

詳細な説明については、以下のリンクを参照してください。

参考：JS Kendo UI グリッドオプション

于 2014-07-17T10:37:54.203 に答える