How to apply filter in creating Kendo UI Data Source from OData

I was working on an application and there was a requirement in which I had to apply filter while fetching data from the server using ODATA. I had two choice to achieve this

  1. Construct ODATA URL with filter applied
  2. Apply filter in Kendo UI Data Source

In this post we will discuss how we could apply filter while creating Kendo UI DataSource reading OData feed.

We can create data source reading ODATA feed as following. Below we are creating data source reading ODATA feed of Netflix


var movieTitleData;
movieTitleData = new kendo.data.DataSource(
{
type: "odata",
endlessScroll: true,
batch: false,
transport: {
read: {
url: "http://odata.netflix.com/Catalog/Titles?$select=Id,ShortName,BoxArt&$top=10",
dataType: "jsonp",

data: {
Accept: "application/json"
}
}
}

});

On inspecting request URL you will find that URL to fetch data is getting constructed as following. We are fetching top 10 movies title from Netflix

image

Now assume there is a requirement to fetch information of a particular movie with given Id. We can do that by applying filter while creating the KendoUI DataSource. We can apply filter to fetch movie of particular id as given below.

image

While applying filter we need to make sure that serverFiltering is set to true.

image

In Filter,

  1. Id is the column on which filter is being applied
  2. eq is operator to apply filter
  3. value is filter value

Kendo UI data source with filter applied can be created as following.


var moviedetailData = new kendo.data.DataSource(
{
type: "odata",
endlessScroll: true,
serverFiltering: true,
transport: {
read: {
url: "http://odata.netflix.com/Catalog/Titles?$select=Id,ShortName,BoxArt,AverageRating,ReleaseYear,Synopsis",
dataType: "jsonp",

data: {
Accept: "application/json"
}

}
},
filter: { filters: [{ field: "Id", operator: "eq", value: query }] }

});

While creating above KendoUI data source

  1. Data is fetched from Odata feed of Netflix
  2. Filter is applied on Id column of Netflix data source
  3. To apply filter at server side serverFiltering attribute is set to true

On inspecting request URL you will find that URL to fetch selected movie is getting constructed as following. We are fetching a particular movie on given id of the movie.

image

You will find that URL being constructed to fetch Odata feed is containing the filter query. In this way we can apply filter while creating Kendo UI DataSource reading an OData feed. I hope you find this post useful. Thanks for reading.

Advertisements

One thought on “How to apply filter in creating Kendo UI Data Source from OData

  1. In your example I believe Id is a string. What would I do in the case of an Id that is an integer or perhaps a guid? In the both cases, using a debugger, I’ve been able to strip the single quotes or cast as a guid, respectively, but I haven’t been able to figure out how to do this in code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s