view

Returns the data items which correspond to the current page, filter, sort, and group configuration. Compare with the data method, which will return data items from all pages, if local data binding and paging are used.

To ensure that data is available this method should be used within the change event handler or the fetch method.

Returns

kendo.data.ObservableArray—The data items. Returns groups if the data items are grouped (via the group option or the group method).

Example - get the paged and sorted data items

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  pageSize: 1,
  page: 2,
  sort: { field: "category", dir: "desc" }
});
dataSource.fetch(function() {
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "1"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view[0].name); // displays "Tea"
});
</script>

Example - get the paged, sorted, and grouped data items

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  group: { field: "category" },
  sort: { field: "name", dir: "asc" },
  pageSize: 2,
  page: 1
});
dataSource.fetch(function() {
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "1"
  var beverages = view[0];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.value); // displays "Beverages"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.items.length); // displays "2"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.items[0].name); // displays "Coffee"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.items[1].name); // displays "Tea"
});
</script>