New to Kendo UI for jQuery? Start a free 30-day trial

View

methods

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.

view

Returns:kendo.data.ObservableArray

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

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

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