2016-03-02 3 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> 

Web Service 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 результатов загружены. Когда пользователь вводит имя, атрибут фильтра запроса на контроллере остается Null. Я думаю, что у меня что-то отсутствует на моем контроллере, но я не знаю, что это. Контроллер представляет собой Web Api контроллер

+0

Дополнительная информация. Когда я делаю отладку на хроме для своего примера (http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering), я могу видеть следующие параметры запроса: $ callback: jQuery191020066861202940345_1456918293601 $ inlinecount: allpages $ format: JSON $ фильтр: StartsWith (ToLower (ProductName), 'ч'), но когда я делаю отладку на моей странице я вижу это как строка запроса Params дубль: 5 пропуск: 0 Страница: 1 PAGESIZE: 5 фильтр [ фильтры] [0] [значение]: фильтр [фильтры] [0] [поле]: текст фильтр [фильтры] [0] [оператор]: startswith фильтр [фильтры] [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> 

Мне не хватает типа: "aspnetmvc-ajax" на dataSource. Кроме того, я считаю, что serverFiltering и пейджинг на DropDownLists не поддерживается, поэтому я удалил их Надеюсь, что это поможет ...

Смежные вопросы