2016-03-02 82 views
0

我想实现一个剑道的DropDownList与服务器过滤 我使用为出发点,这个例子 http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering剑道DROPDOWNLIST服务器过滤用的WebAPI

我的客户具有下面的代码

<div class="demo-section k-content"> 
     <h4>Products</h4> 
     <input id="products" style="width: 100%" /> 
     </div> 

     <script> 
       $(document).ready(function() { 
        $("#products").kendoDropDownList({ 
         filter: "startswith", 
         dataTextField: "Value", 
         dataValueField: "Key", 
         dataSource: { 
          pageSize    : 5, 
          serverPaging  : true, 
          serverFiltering : true, 
          serverSorting  : true, 
          transport: { 
           read: { 
            dataType  : "json", 
            type    : 'GET', 
            url     : "http://localhost:7340/DKAPI/FK/1004", 

           } 
          }, 
          schema: { 
           data     : "Data" 

          }, 
         } 
        }); 
       }); 
       </script> 

的网络服务http://localhost:7340/DKAPI/FK/1004返回json的形式

{ 
"Data": [22] 
0: { 
"Key": 1 
"Value": "JohnsdParker" 
}- 
1: { 
"Key": 2 
"Value": "ClaireBennett" 
}- 
2: { 
"Key": 3 
"Value": "Molly Jones" 
}- 
3: { 
"Key": 4 
"Value": "PeterPetrelli" 
}- 
4: { 
"Key": 5 
"Value": "DiarmuidO Reilly" 
}- 
5: { 
"Key": 10 
"Value": "Mary Collins" 
}- 
6: { 
"Key": 17 
"Value": "Paul O Neil" 
}- 
7: { 
"Key": 24 
"Value": "LouiseO Herlihy" 
}- 
8: { 
"Key": 25 
"Value": "NeilO Brien" 
}- 
9: { 
"Key": 26 
"Value": "SeanFitzpatrick" 
}- 
10: { 
"Key": 27 
"Value": "OliverSmith" 
}- 
11: { 
"Key": 28 
"Value": "DG" 
}- 
12: { 
"Key": 29 
"Value": "Josdfsfsdfss" 
}- 
13: { 
"Key": 30 
"Value": null 
}- 
14: { 
"Key": 31 
"Value": null 
}- 
15: { 
"Key": 32 
"Value": "ougamouga" 
}- 
16: { 
"Key": 33 
"Value": "hkkjhkhkhjk" 
}- 
17: { 
"Key": 34 
"Value": ",khjkhkjlkjlkj" 
}- 
18: { 
"Key": 35 
"Value": "trytrytutu" 
}- 
19: { 
"Key": 36 
"Value": "sdfgsdgf" 
}- 
20: { 
"Key": 37 
"Value": "testtest" 
}- 
21: { 
"Key": 38 
"Value": "pablosdfsd" 
}- 
- 
"Total": 22 
"AggregateResults": null 
"Errors": null 
} 

我的控制器在形式

[HttpGet] 
[Route("DKAPI/FK/{fkcolid}")] 
public HttpResponseMessage Index([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request, int fkcolid) 
{ 
    Dictionary<int, string> FKDict = _fkService.DDLBFKCol(fkcolid); 

    if (FKDict == null) 
     return Request.CreateResponse(HttpStatusCode.NotFound, "The Requested Resouce was not Fount"); 
    else 
     return Request.CreateResponse(HttpStatusCode.OK, FKDict.ToDataSourceResult(request)); 
} 

我的问题是以下 当DropDownList的最初加载所述第一5个结果加载。当用户输入名称时,控制器上请求的过滤器属性将保持为空。 我想我错过了我的控制器上的东西,但我不知道它是什么。 控制器是网络API控制器

+0

其他信息。当我为他们的例子在Chrome上进行调试时(http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering),我可以看到以下Query Strings params $回调:jQuery191020066861202940345_1456918293601 $ inlinecount:allpages $ format: json $ filter:startswith(tolower(ProductName),'cha')但是当我在页面上进行调试时,我将此视为查询字符串参数:5 跳过:0 页面:1 pageSize:5 filter [过滤器] [0] [值]: 过滤器[filters] [0] [field]:Text filter [filters] [0] [operator]:startswith filter [filters] [0] [ignoreCase]:true 过滤[逻辑]:和 –

回答

0

我终于成功利用此 http://www.telerik.com/forums/datasourcerequest-filters-and-sorts-fields-null-here-is-the-solution 看来,剑道文档是非常不好解决的问题...... 所以我最后的客户端代码是这个样子

<script> 
        $(document).ready(function() { 
         $("#products").kendoDropDownList({ 
          filter: "startswith", 
          dataTextField: "Value", 
          dataValueField: "Key", 
          dataSource: { 
          type: "aspnetmvc-ajax", 
           serverFiltering : true, 
           transport: { 
            read: { 
             dataType  : "json", 
             type    : 'GET', 
             url     : "http://localhost:7340/DKAPI/FK/1004", 
             crossOrigin : true 

            } 
           }, 
           schema: { 
            data     : "Data", 
            total     :"Total"   

           }, 
          } 
         }); 
        }); 
        </script> 

我在dataSource中缺少类型:“aspnetmvc-ajax”。除此之外,我相信DropDownLists ServerFiltering和分页不支持,所以我删除它们 希望它可以帮助...