Kendo Dropdownlist Server Filtering with WebApi

Question

I am trying to implement a Kendo DropDownList with Server Filtering I am using as a starting point this example http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering

My client has the following code

 <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>

The Web Service http://localhost:7340/DKAPI/FK/1004 returns json in the form

{
"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
}

My Controller is in the form

[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));
}

My problem is the following When the DropDownList is initially loaded the first 5 results are loaded. When the user types a name the Filters Attribute of the request on the Controller remains Null. I guess I am missing something on my controller but I don't know what it is. The Controller is a Web Api Controller

Answer 1

I finally managed to solve the issue by using this http://www.telerik.com/forums/datasourcerequest-filters-and-sorts-fields-null-here-is-the-solution It seems that Kendo Documentation is pretty poor... So my final client code is like this

<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>

I was missing type: "aspnetmvc-ajax" on dataSource. Apart from that, I believe that serverFiltering and paging on DropDownLists is not supported so I removed them Hope it helps ...