2014-07-17 30 views
1

这里是我的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); 
} 

我想申请滤波在状态类型filed.And为此,我已经绑定这个领域dropdownlist。

而我的问题是,当我试图通过选择的状态从一个下载其无所事事做过滤。

我根据这个例子的工作:

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

回答

0

从您的代码,一切似乎除了控制器读操作的罚款。现在,如果当您从网格视图,然后就在你身边唯一需要改变的,将过滤器的控制器被称为低于:

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

编辑:

如果你不这样做使用Kendo.MVC那么你有两个选项来过滤:

选项1:客户端过滤
- >您将需要得到所有在读取数据的时候,所以当应用过滤时,您拥有所有数据,如果数据源不大,这是最好的选择,因为它可以节省不需要的控制器过滤请求。
- >首先认为你需要做的是subscirbe filterMenuInit()的网格,并添加下面的脚本进行客户端过滤。 代码:

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

对于详细的例子:Extact from Kendo Examples

选项2:服务器端筛选
- >我没有关于它的很多想法,但同时我正在寻找我的过滤选项我遇到了下面的问题,这对我的应用来说很好,但有点复杂。但我认为你可以使用它。

JS Fiddle Sample

请参考以下链接了解详细说明。

参考:JS Kendo UI Grid Options

+0

D_Learning感谢您answer.But我想让你知道我对剑道JS version.And工作,我认为DataSourceRequest类是对剑道。MVC DLL。 – Pawan