How to iterate all the data in Kendo UI Data Source

In this post we will take a look on how could we iterate all the data of Kendo UI Data Source? Let us say we have a JavaScript array as given below,


var speakers = [
 {
 SpeakerName: "Chris Sells",
 SpeakerTitle: "Author, Ex- Microsoft and ardent community contributor"

},
 {

SpeakerName: "Steve Smith",
 SpeakerTitle: "Speaker, Author, Microsoft Regional Director and MVP"

},
 {

SpeakerName: "Dr.Michelle Smith",
 SpeakerTitle: "Enterprise Consultant"

},
 {

SpeakerName: "Gaurav Mantri",
 SpeakerTitle: "Founder Cerebrata & Windows Azure MVP"
 }

];

We will create a Kendo Datasource reading speakers array. Very simply we can create data source as following,


var yourdatasource = new kendo.data.DataSource({

data: speakers
 });

Now we will see how we could iterate each data of data source. We can do that by calling data() function on Kendo UI Data source. data() function is used to get and set data of the Kendo data source.

image

So we can read data from data source as following. We are alerting length of data source below.


var datasourcedata = yourdatasource.data()
alert(datasourcedata.length);

Finally we can iterate through data source as following,

yourdatasource.fetch();
 var datasourcedata = yourdatasource.data()

 for (var i = 0; i < datasourcedata.length; i++) {
 var dataitem = datasourcedata[i].SpeakerName;
 alert(dataitem);
 }

As output in alert we will get entire speakername. In this way you can iterate through data of Kendo datasource. I hope you find this post useful. Thanks for reading.

Advertisement

8 thoughts on “How to iterate all the data in Kendo UI Data Source

  1. What about a grid that has more than one page? data() gets only the items for the current page shown, How do you resolve it?

  2. Hi, I am developing an ASP.NET MVC application and I have method of type List in one of my Model classes. This method returns an array of all elements that I want to be displayed in a Telerik Grid. Is it possible to bind array data in a Telerik Grid? If yes, then how?

    My Controller returns the list in itself. I want the elements in the list to be displayed on a Kendo Grid. How can I do this? Thanks.

  3. Pingback: Top 5 Blog Posts of 2014 | telerik helper

  4. this doesn’t seem to work if the grid column uses an editor template. in such cases, inputted changes are not shown in the model you iterate over.

  5. Just a warning, your suggestion does not work with a kendo Hierarchical datasource – which is fairly common eg kendo tree. It’s because a hierarchical datasource contains arrays of arrays and so you need recursive traversal. But your title really suggests it would do this, so may I suggest changing it to realize this important limitation, that it doesn’t cover all common cases.

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 )

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.