Reputation: 883
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
Upvotes: 0
Views: 2122
Reputation: 883
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 ...
Upvotes: 1