API Reference

kendo.data.DataSource

Configuration (...)
Methods (...)
Events (...)

No results. Try clearing the filter.

Configuration

aggregate `Array`

The aggregate(s) which are calculated when the data source populates with data. The supported aggregates are "average", "count", "max", "min" and "sum".

The data source calculates aggregates client-side unless the serverAggregates option is set to true.

Example - specify aggregates

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  aggregate: [
    { field: "age", aggregate: "sum" },
    { field: "age", aggregate: "min" },
    { field: "age", aggregate: "max" }
  ]
});
dataSource.fetch(function(){
  var results = dataSource.aggregates().age;
  console.log(results.sum, results.min, results.max); // displays "63 30 33"
});
</script>

aggregate.aggregate `String`

The name of the aggregate function. The supported aggregates are "average", "count", "max", "min" and "sum".

Example - specify aggregate function

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  aggregate: [
    { field: "age", aggregate: "sum" }
  ]
});
dataSource.fetch(function(){
  var results = dataSource.aggregates().age;
  console.log(results.sum); // displays "63"
});

aggregate.field `String`

The data item field which will be used to calculate the aggregates.

Example - specify aggregate field

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  aggregate: [
    { field: "age", aggregate: "sum" }
  ]
});
dataSource.fetch(function(){
  var results = dataSource.aggregates().age;
  console.log(results.sum); // displays "63"
});
</script>

autoSync `Boolean`(default: false)

If set to true the data source would automatically save any changed data items by calling the sync method. By default changes are not automatically saved.

Example - enable auto sync

<script>
var dataSource = new kendo.data.DataSource({
  autoSync: true,
  transport: {
    read:  {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: "http://demos.kendoui.com/service/products/update",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20); // auto-syncs and makes request to http://demos.kendoui.com/service/products/update
});
</script>

batch `Boolean`(default: false)

If set to true the data source will batch CRUD operation requests. For example updating two data items would cause one HTTP request instead of two. By default the data source makes a HTTP request for every CRUD operation.

The changed data items are sent by default as models. This can be changed via the parameterMap option.

Example - enable batch mode

<script>
var dataSource = new kendo.data.DataSource({
  batch: true,
  transport: {
    read:  {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: "http://demos.kendoui.com/service/products/update",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  var anotherProduct = dataSource.at(1);
  anotherProduct.set("UnitPrice", 20);
  dataSource.sync(); // causes only one request to "http://demos.kendoui.com/service/products/update"
});
</script>

data `Array|String`

The array of data items which the data source contains. The data source will wrap those items as kendo.data.ObservableObject or kendo.data.Model (if schema.model is set).

Can be set to a string value if the schema.type option is set to "xml".

Example - set the data items of a data source

var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
dataSource.fetch(function(){
  var janeDoe = dataSource.at(0);
  console.log(janeDoe.name); // displays "Jane Doe"
});

Example - set the data items as an XML string

<script>
var dataSource = new kendo.data.DataSource({
  data: '<books><book id="1"><title>Secrets of the JavaScript Ninja</title></book></books>',
  schema: {
    // specify the the schema is XML
    type: "xml",
    // the XML element which represents a single data record
    data: "/books/book",
    // define the model - the object which will represent a single data record
    model: {
      // configure the fields of the object
      fields: {
        // the "title" field is mapped to the text of the "title" XML element
        title: "title/text()",
        // the "id" field is mapped to the "id" attribute of the "book" XML element
        id: "@id"
      }
    }
  }
});
dataSource.fetch(function() {
  var books = dataSource.data();
  console.log(books[0].title); // displays "Secrets of the JavaScript Ninja"
});
</script>

filter `Array|Object`

The filter(s) which is (are) applied over the data items. By default no filter is applied.

The data source filters the data items client-side unless the serverFiltering option is set to true.

Example - set a single filter

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  filter: { field: "name", operator: "startswith", value: "Jane" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "1"
  console.log(view[0].name); // displays "Jane Doe"
});
</script>

Example - set filter as conjunction (and)

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  filter: [
    // leave data items which are "Beverage" and not "Coffee"
    { field: "category", operator: "eq", value: "Beverages" },
    { field: "name", operator: "neq", value: "Coffee" }
  ]
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "1"
  console.log(view[0].name); // displays "Tea"
});
</script>

Example - set filter as disjunction (or)

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  filter: {
    // leave data items which are "Food" or "Tea"
    logic: "or",
    filters: [
      { field: "category", operator: "eq", value: "Food" },
      { field: "name", operator: "eq", value: "Tea" }
    ]
  }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "2"
  console.log(view[0].name); // displays "Tea"
  console.log(view[1].name); // displays "Ham"
});
</script>

filter.field `String`

The data item field to which the filter operator is applied.

Example - set the filter field

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  filter: { field: "name", operator: "startswith", value: "Jane" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "1"
  console.log(view[0].name); // displays "Jane Doe"
});
</script>

filter.operator `String`

The filter operator (comparison). The supported operators are: "eq" (equal to), "neq" (not equal to), "lt" (less than), "lte" (less than or equal to), "gt" (greater than), "gte" (greater than or equal to), "startswith", "endswith", "contains". The last three are supported only for string fields.

Example - set the filter operator

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  filter: { field: "name", operator: "startswith", value: "Jane" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "1"
  console.log(view[0].name); // displays "Jane Doe"
});
</script>

filter.value `Object`

The value to which the field is compared. The value must be from the same type as the field.

Example - specify the filter value

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", birthday: new Date(1983, 1, 1) },
    { name: "John Doe", birthday: new Date(1980, 1, 1)}
  ],
  filter: { field: "birthday", operator: "gt", value: new Date(1980, 1, 1) }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "1"
  console.log(view[0].name); // displays "Jane Doe"
});
</script>

group `Array|Object`

The grouping configuration of the data source. If set the data items will be grouped when the data source is populated. By default grouping is not applied.

The data source groups the data items client-side unless the serverGrouping option is set to true.

Example - set group as an object

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  // group by the "category" field
  group: { field: "category" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "2"
  var beverages = view[0];
  console.log(beverages.value); // displays "Beverages"
  console.log(beverages.items[0].name); // displays "Tea"
  console.log(beverages.items[1].name); // displays "Coffee"
  var food = view[1];
  console.log(food.value); // displays "Food"
  console.log(food.items[0].name); // displays "Ham"
});
</script>

Example - set group as an array (subgroups)

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Pork", category: "Food", subcategory: "Meat" },
    { name: "Pepper", category: "Food", subcategory: "Vegetables" },
    { name: "Beef", category: "Food", subcategory: "Meat" }
  ],
  group: [
    // group by "category" and then by "subcategory"
    { field: "category" },
    { field: "subcategory" },
  ]
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "1"
  var food = view[0];
  console.log(food.value); // displays "Food"
  var meat = food.items[0];
  console.log(meat.value); // displays "Meat"
  console.log(meat.items.length); // displays "2"
  console.log(meat.items[0].name); // displays "Pork"
  console.log(meat.items[1].name); // displays "Beef"
  var vegetables = food.items[1];
  console.log(vegetables.value); // displays "Vegetables"
  console.log(vegetables.items.length); // displays "1"
  console.log(vegetables.items[0].name); // displays "Pepper"
});
</script>

group.aggregates `Array`

The aggregate(s) which are calculated during grouping. The supported aggregates are "average", "count", "max", "min" and "sum".

Example - set group aggregates

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages", price: 1 },
    { name: "Coffee", category: "Beverages", price: 2 },
    { name: "Ham", category: "Food", price: 3 },
  ],
  group: {
    field: "category",
    aggregates: [
      { field: "price", aggregate: "max" },
      { field: "price", aggregate: "min" }
    ]
  }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  var beverages = view[0];
  console.log(beverages.aggregates.price.max); // displays "2"
  console.log(beverages.aggregates.price.min); // displays "1"
  var food = view[1];
  console.log(food.aggregates.price.max); // displays "3"
  console.log(food.aggregates.price.min); // displays "3"
});
</script>

group.aggregates.aggregate `String`

The name of the aggregate function. Specifies the aggregate function. The supported aggregates are "average", "count", "max", "min" and "sum".

Example - specify aggregate function

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages", price: 1 },
    { name: "Coffee", category: "Beverages", price: 2 },
    { name: "Ham", category: "Food", price: 3 }
  ],
  group: {
    field: "category",
    aggregates: [
      // calculate max price
      { field: "price", aggregate: "max" }
    ]
  }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  var beverages = view[0];
  console.log(beverages.aggregates.price.max); // displays "2"
});
</script>

group.aggregates.field `String`

The data item field which will be used to calculate the aggregates.

Example - specify aggregate field

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages", price: 1 },
    { name: "Coffee", category: "Beverages", price: 2 },
    { name: "Ham", category: "Food", price: 3 }
  ],
  group: {
    field: "category",
    aggregates: [
      // calculate max price
      { field: "price", aggregate: "max" }
    ]
  }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  var beverages = view[0];
  console.log(beverages.aggregates.price.max); // displays "2"
});
</script>

group.dir `String`(default: "asc")

The sort order of the group. The supported values are "asc" (ascending order) and "desc" (descending order). The default sort order is ascending.

Example - sort the groups in descending order

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages"},
    { name: "Ham", category: "Food"},
  ],
  // group by "category" in descending order
  group: { field: "category", dir: "desc" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  var food = view[0];
  console.log(food.value); // displays "Food"
  var beverages = view[1];
  console.log(beverages.value); // displays "Beverages"
});
</script>

group.field `String`

The data item field to group by.

Example - set the field

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  // group by the "category" field
  group: { field: "category" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  var beverages = view[0];
  console.log(beverages.items[0].name); // displays "Tea"
  console.log(beverages.items[1].name); // displays "Coffee"
  var food = view[1];
  console.log(food.items[0].name); // displays "Ham"
});
</script>

page `Number`

The page of data which the data source will return when the view method is invoked or request from the remote service.

The data source will page the data items client-side unless the serverPaging option is set to true.

Example - set the current page

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  // set the second page as the current page
  page: 2,
  pageSize: 2
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "1"
  console.log(view[0].name); // displays "Ham"
});
</script>

pageSize `Number`

The number of data items per page.

The data source will page the data items client-side unless the serverPaging option is set to true.

Example - set the page size

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  page: 1,
  // a page of data contains two data items
  pageSize: 2
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "2"
  console.log(view[0].name); // displays "Tea"
  console.log(view[1].name); // displays "Coffee"
});
</script>

schema `Object`

The configuration used to parse the remote sevice response.

Example - specify the schema of the remote service

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
      data: { q: "html5" } // search for tweets that contain "html5"
    }
  },
  schema: {
    data: function(response) {
      return response.results; // twitter's response is { "results": [ /* results */ ] }
    }
  }
});
dataSource.fetch(function(){
  var data = this.data();
  console.log(data.length);
});
</script>

schema.aggregates `Function|String`

The field from the response which contains the aggregate results. Can be set to a function which is called to return the aggregate results from the response.

The aggregates option is used only when the serverAggregates option is set to true.

The result of the function should be a JavaScript object which contains the aggregate results for every fields in the following format:

{
  FIEL1DNAME: {
    FUNCTON1NAME: FUNCTION1VALUE,
    FUNCTON2NAME: FUNCTION2VALUE
  },
  FIELD2NAME: {
    FUNCTON1NAME: FUNCTION1VALUE
  }
}

For example if the data source is configured like this:

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  }
  serverAggregates: true,
  aggregate: [
    { field: "unitPrice", aggregate: "max" },
    { field: "unitPrice", aggregate: "min" },
    { field: "ProductName", aggregate: "count" }
  ]
});
</script>

The aggregate results should have the following format:

{
  unitPrice: {
      max: 100,
      min: 1
  },
  productName: {
      count: 42
  }
}

Example - set aggregates as a string

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  }
  serverAggregates: true,
  schema: {
    aggregates: "aggregates" // aggregate results are returned in the "aggregates" field of the response
  }
});
</script>

Example - set aggregates as a function

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  }
  serverAggregates: true,
  schema: {
    aggregates: function(response) {
      return response.aggregates;
    }
  }
});
</script>

schema.data `Function|String`

The field from the server response which contains the data items. Can be set to a function which is called to return the data items for the response.

Returns

Array The data items from the response.

Example - specify the field which contains the data items as a string

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
      data: { q: "html5" } // search for tweets that contain "html5"
    }
  },
  schema: {
    data: "results" // twitter's response is { "results": [ /* results */ ] }
  }
});
dataSource.fetch(function(){
  var data = this.data();
  console.log(data.length);
});
</script>

Example - specify the field which contains the data items as a function

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
      data: { q: "html5" } // search for tweets that contain "html5"
    }
  },
  schema: {
    data: function(response) {
      return response.results; // twitter's response is { "results": [ /* results */ ] }
    }
  }
});
dataSource.fetch(function(){
  var data = this.data();
  console.log(data.length);
});
</script>

schema.errors `Function|String`(default: "errors")

The field from the server response which contains server-side errors. Can be set to a function which is called to return the errors for response. If there are any errors the error event will be fired.

Example - specify the error field as a string

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
      data: { q: "#" }
    }
  },
  schema: {
    errors: "error" // twitter's response is { "error": "Invalid query" }
  },
  error: function(e) {
    console.log(e.errors); // displays "Invalid query"
  }
});
dataSource.fetch();
</script>

Example - specify the error field as a function

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
      data: { q: "#" }
    }
  },
  schema: {
    errors: function(response) {
      return response.error; // twitter's response is { "error": "Invalid query" }
    }
  },
  error: function(e) {
    console.log(e.errors); // displays "Invalid query"
  }
});
dataSource.fetch();
</script>

schema.groups `Function|String`

The field from the server response which contains the groups. Can be set to a function which is called to return the groups from the response.

The groups option is used only when the serverGrouping option is set to true.

The result should have the following format:

[{
  aggregates: {
    FIEL1DNAME: {
      FUNCTON1NAME: FUNCTION1VALUE,
      FUNCTON2NAME: FUNCTION2VALUE
    },
    FIELD2NAME: {
      FUNCTON1NAME: FUNCTION1VALUE
    }
  },
  field: FIELDNAME, // the field by which the data items are grouped
  hasSubgroups: true, // true if there are subgroups
  items: [
    // either the subgroups or the data items
    {
      aggregates: {
        //nested group aggregates
      },
      field: NESTEDGROUPFIELDNAME,
      hasSubgroups: false,
      items: [
      // data records
      ],
      value: NESTEDGROUPVALUE
    },
    //nestedgroup2, nestedgroup3, etc.
  ],
  value: VALUE // the group key
} /* other groups */
]

Example - set groups as a string

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  }
  serverGrouping: true,
  schema: {
    groups: "groups" // groups are returned in the "groups" field of the response
  }
});
</script>

Example - set groups as a function

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  }
  serverGrouping: true,
  schema: {
    groups: function(response) {
      return response.groups; // groups are returned in the "groups" field of the response
    }
  }
});
</script>

schema.model `Object|kendo.data.Model`

The data item (model) configuration.

If set to an object the Model.define method will be used to initialize the data source model.

If set to an existing kendo.data.Model instance the data source will use that instance and will not initialize a new one.

Example - set the model as a JavaScript object

<script>
var dataSource = new kendo.data.DataSource({
  schema: {
    model: {
      id: "ProductID",
      fields: {
        ProductID: {
          //this field will not be editable (default value is true)
          editable: false,
          // a defaultValue will not be assigned (default value is false)
          nullable: true
        },
        ProductName: {
          //set validation rules
          validation: { required: true }
        },
        UnitPrice: {
          //data type of the field {Number|String|Boolean|Date} default is String
          type: "number",
          // used when new model is created
          defaultValue: 42,
          validation: { required: true, min: 1 }
        }
      }
    }
  }
});
</script>

Example - set the model as an existing kendo.data.Model instance

<script>
var Product = kendo.model.define({
  id: "ProductID",
  fields: {
    ProductID: {
      //this field will not be editable (default value is true)
      editable: false,
      // a defaultValue will not be assigned (default value is false)
      nullable: true
    },
    ProductName: {
      //set validation rules
      validation: { required: true }
    },
    UnitPrice: {
      //data type of the field {Number|String|Boolean|Date} default is String
      type: "number",
      // used when new model is created
      defaultValue: 42,
      validation: { required: true, min: 1 }
    }
  }
});
var dataSource = new kendo.data.DataSource({
  schema: {
    model: Product
  }
});
</script>

schema.parse `Function`

Executed before the server response is used. Use it to preprocess or parse the server response.

Example - data projection

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    }
  },
  schema: {
    parse: function(response) {
      var products = [];
      for (var i = 0; i < response.length; i++) {
        var product = {
          id: response[i].ProductID,
          name: response[i].ProductName
        };
        products.push(product);
      }
      return products;
    }
  }
});
dataSource.fetch(function(){
  var data = dataSource.data();
  var product = data[0];
  console.log(product.name); // displays "Chai"
});
</script>

schema.total `Function|String`

The field from the server response which contains the total number of data items. Can be set to a function which is called to return the total number of data items for the response.

If schema.total is not specified the length of the Array returned by schema.data will be used.
The schema.total option must be set if the serverPaging option is set to true.

Returns

Number The total number of data items.

Example: set total as a string

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  }
  serverGrouping: true,
  schema: {
    total: "total" // total is returned in the "total" field of the response
  }
});
</script>

Example: set total as a function

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  }
  serverGrouping: true,
  schema: {
    total: function(response) {
      return response.total; // total is returned in the "total" field of the response
    }
  }
});
</script>

schema.type `String`(default: "json")

The type of the response. The supported values are "xml" and "json". By default the schema interprets the server response as JSON.

Example - use XML data

<script>
var dataSource = new kendo.data.DataSource({
  data: '<books><book id="1"><title>Secrets of the JavaScript Ninja</title></book></books>',
  schema: {
    // specify the the schema is XML
    type: "xml",
    // the XML element which represents a single data record
    data: "/books/book",
    // define the model - the object which will represent a single data record
    model: {
      // configure the fields of the object
      fields: {
        // the "title" field is mapped to the text of the "title" XML element
        title: "title/text()",
        // the "id" field is mapped to the "id" attribute of the "book" XML element
        id: "@cover"
      }
    }
  }
});
dataSource.fetch(function() {
  var books = dataSource.data();
  console.log(books[0].title); // displays "Secrets of the JavaScript Ninja"
});
</script>

serverAggregates `Boolean`(default: false)

If set to true the data source will leave the aggregate calculation to the remote service. By default the data source calculates aggregates client-side.

Don't forget to set schema.aggreagates if you set serverAggregates to true.

Example - enable server aggregates

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  },
  serverAggregates: true,
  aggregate: [
    { field: "age", aggregate: "sum" }
  ],
  schema: {
    aggregates: "aggregates" // aggregate results are returned in the "aggregates" field of the response
  }
});
</script>

serverFiltering `Boolean`(default: false)

If set to true the data source will leave the filtering implementation to the remote service. By default the data source performs filtering client-side.

By default the filter is sent to the server following jQuery's conventions.

For example the filter { logic: "and", filters: [ { field: "name", operator: "startswith", value: "Jane" } ] } is sent as:

filter[logic]: and
filter[filters][0][field]: name
filter[filters][0][operator]: startswith
filter[filters][0][value]: Jane

Use the parameterMap option to send the filter option in a different format.

Example - enable server filtering

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  },
  serverFiltering: true,
  filter: { logic: "and", filters: [ { field: "name", operator: "startswith", value: "Jane" } ] }
});
</script>

serverGrouping `Boolean`(default: false)

If set to true the data source will leave the grouping implementation to the remote service. By default the data source performs grouping client-side.

By default the group is sent to the server following jQuery's conventions.

For example the group { field: "category", dir: "desc" } is sent as:

group[0][field]: category
group[0][dir]: desc

Use the parameterMap option to send the group option in a different format.

Example - enable server grouping

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  },
  serverGrouping: true,
  group: { field: "category", dir: "desc" }
});
</script>

serverPaging `Boolean`(default: false)

If set to true the data source will leave the data item paging implementation to the remote service. By default the data source performs paging client-side.

Don't forget to set schema.total if you set serverPaging to true.

The following options are sent to the server when server paging is enabled:

page - the page of data item to return (1 means the first page)
pageSize - the number of items to return
skip - how many data items to skip
take - the number of data items to return (the same as pageSize)

Use the parameterMap option to send the paging options in a different format.

Example - enable server paging

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  },
  serverPaging: true,
  schema: {
    total: "total" // total is returned in the "total" field of the response
  }
});
</script>

serverSorting `Boolean`(default: false)

If set to true the data source will leave the data item sorting implementation to the remote service. By default the data source performs sorting client-side.

By default the sort is sent to the server following jQuery's conventions.

For example the sort { field: "age", dir: "desc" } is sent as:

sort[0][field]: age
sort[0][dir]: desc

Use the parameterMap option to send the paging options in a different format.

Example - enable server sorting

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  },
  serverSorting: true,
  sort: { field: "age", dir: "desc" }
});
</script>

sort `Array|Object`

The sort order which will be applied over the data items. By default the data items are not sorted.

The data source sorts the data items client-side unless the serverSorting option is set to true.

Example - sort the data items

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  sort: { field: "age", dir: "desc" }
});
dataSource.fetch(function(){
  var data = dataSource.view();
  console.log(data[0].age); // displays "33"
});
</script>

Example - sort the data items by multiple fields

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  sort: [
    // sort by "category" in descending order and then by "name" in ascending order
    { field: "category", dir: "desc" },
    { field: "name", dir: "asc" }
  ]
});
dataSource.fetch(function(){
  var data = dataSource.view();
  console.log(data[1].name); // displays "Coffee"
});
</script>

sort.dir `String`

The sort order (direction). The supported values are "asc" (ascending order) and "desc" (descending order).

Example - specify the sort order (direction)

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  // order by "age" in descending order
  sort: { field: "age", dir: "desc" }
});
dataSource.fetch(function(){
  var data = dataSource.view();
  console.log(data[0].age); // displays "33"
});
</script>

sort.field `String`

The field by which the data items are sorted.

Example - specify the sort field

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  // order by "age" in descending order
  sort: { field: "age", dir: "desc" }
});
dataSource.fetch(function(){
  var data = dataSource.view();
  console.log(data[0].age); // displays "33"
});
</script>

transport `Object`

The configuration used to load and save the data items. A data source is remote or local based on the way of it retrieves data items.

Remote data sources load and save data items from and to a remote end-point (a.k.a. remote service or server). The transport option describes the remote service configuration - URL, HTTP verb, HTTP headers etc. The transport option can also be used to implement custom data loading and saving.

Local data sources are bound to a JavaScript array via the data option.

Example - specify the remote service configuration

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  }
});
dataSource.fetch(function() {
  var products = dataSource.data();
  console.log(products[0].ProductName); // displays "Chai"
});
</script>

transport.create `Object|String|Function`

The configuration used when the data source saves newly created data items. Those are items added to the data source via the add or insert methods.

The data source uses jQuery.ajax to make a HTTP request to the remote service. The value configured via transport.create is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.create.

If the value of transport.create is a function, the data source invokes that function instead of jQuery.ajax.

If the value of transport.create is a string the data source uses this string as the URL of the remote service.

Important: The remote service must return the inserted data items and the data item field configured as the id must be set. For example if the id of the data item is ProductID the "create" server response must be [{ "ProductID": 79 }].

Example - set the create remote service

<script>
var dataSource = new kendo.data.DataSource({
    transport: {
    // make JSONP request to http://demos.kendoui.com/service/products/create
        create: {
      url: "http://demos.kendoui.com/service/products/create",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    parameterMap: function(data, type) {
      if (type == "create") {
        // send the created data items as the "models" service parameter encoded in JSON
        return { models: kendo.stringify(data.models) };
            }
        }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
    }
});
// create a new data item
dataSource.add( { ProductName: "New Product" });
// save the created data item
dataSource.sync(); // server response is [{"ProductID":78,"ProductName":"New Product","UnitPrice":0,"UnitsInStock":0,"Discontinued":false}]
</script>

Example - set create as a function

<script>
var dataSource = new kendo.data.DataSource({
    transport: {
    read: function(options) {
      /* implementation omitted for brevity */
    },
        create: function(options) {
      // make JSONP request to http://demos.kendoui.com/service/products/create

            $.ajax( {
        url: "http://demos.kendoui.com/service/products/create",
        dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        // send the created data items as the "models" service parameter encoded in JSON
        data: {
          models: kendo.stringify(options.data.models)
        },
                success: function(result) {
          // notify the data source that the request succeeded

                    options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
                }
            });
        }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
    }
});
dataSource.add( { ProductName: "New Product" });
dataSource.sync();
</script>

transport.create.cache `Boolean`

If set to false the request result will not be cached by the browser. Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. By default "jsonp" requests are not cached. Refer to the jQuery.ajax documentation for further info.

Example - enable request caching

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    create: {
      /* omitted for brevity */
      cache: true
    }
}
});
</script>

transport.create.contentType `String`

The content-type HTTP header sent to the server. Default is "application/x-www-form-urlencoded". Use "application/json" if the content is JSON. Refer to the jQuery.ajax documentation for further info.

Example - set content type

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    create: {
      /* omitted for brevity */
        contentType: "application/json"
    }
}
});
</script>

transport.create.data `Object|Function`

Additional parameters which are sent to the remote service. Refer to the jQuery.ajax documentation for further info.

Example - send additional parameters as an object

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    create: {
      /* omitted for brevity */
        data: {
        name: "Jane Doe",
        age: 30
        }
    }
}
});
</script>

Example - send additional parameters by returning them from a function

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    create: {
      /* omitted for brevity */
        data: function() {
            return {
          name: "Jane Doe",
          age: 30
        }
    }
}
  }
});
</script>

transport.create.dataType `String`

The type of result expected from the server. Commonly used values are "json" and "jsonp". Refer to the jQuery.ajax documentation for further info.

Example - set the data type to JSON

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    create: {
      /* omitted for brevity */
        dataType: "json"
    }
}
});
</script>

transport.create.type `String`(default: "GET")

The type of request to make ("POST", "GET", "PUT" or "DELETE"), default is "GET".

The type option is ignored if dataType is set to "jsonp". JSONP always uses GET requests. Refer to the jQuery.ajax documentation for further info.

Example - set the HTTP verb of the request

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    create: {
      /* omitted for brevity */
        type: "POST"
    }
}
});
</script>

transport.create.url `String|Function`

The URL to which the request is sent.

If set to function the data source will invoke it and use the result as the URL.

Example - specify URL as a string

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    create: {
      url: "http://demos.kendoui.com/service/products/create",
      cache: true,
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    parameterMap: function(data, type) {
      if (type == "create") {
        return { models: kendo.stringify(data.models) }
    }
}
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.add( { ProductName: "New Product" });
dataSource.sync();
</script>

Example - specify URL as a function

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    create: {
      url: function(options) {
        return "http://demos.kendoui.com/service/products/create"
      },
      cache: true,
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    parameterMap: function(data, type) {
      if (type == "create") {
        return { models: kendo.stringify(data.models) }
        }
    }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
}
});
dataSource.add( { ProductName: "New Product" });
dataSource.sync();
</script>

transport.destroy `Object|String|Function`

The configuration used when the data source destroys data items. Those are items removed from the data source via the remove method.

The data source uses jQuery.ajax to make a HTTP request to the remote service. The value configured via transport.destroy is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.destroy.

If the value of transport.destroy is a function, the data source invokes that function instead of jQuery.ajax.

If the value of transport.destroy is a string the data source uses this string as the URL of the remote service.

Example - set the destroy remote service

<script>
var dataSource = new kendo.data.DataSource({
    transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    },
    // make JSONP request to http://demos.kendoui.com/service/products/destroy
        destroy: {
      url: "http://demos.kendoui.com/service/products/destroy",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    parameterMap: function(data, type) {
      if (type == "destroy") {
        // send the destroyed data items as the "models" service parameter encoded in JSON
        return { models: kendo.stringify(data.models) }
            }
        }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
    }
});
dataSource.fetch(function() {
  var products = dataSource.data();
  // remove the first data item
  dataSource.remove(products[0]);
  // send the destroyed data item to the remote service
  dataSource.sync();
});
</script>

Example - set destroy as a function

<script>
var dataSource = new kendo.data.DataSource({
    transport: {
    read: function(options) {
      $.ajax({
        url: "http://demos.kendoui.com/service/products",
        dataType: "jsonp",
        success: function(result) {
          options.success(result);
        }
      });
    },
        destroy: function(options) {
      // make JSONP request to http://demos.kendoui.com/service/products/destroy

            $.ajax( {
        url: "http://demos.kendoui.com/service/products/destroy",
        dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        // send the destroyed data items as the "models" service parameter encoded in JSON
        data: {
          models: kendo.stringify(options.data.models)
        },
                success: function(result) {
          // notify the data source that the request succeeded

                    options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
                }
            });
        }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
    }
});
dataSource.fetch(function() {
  var products = dataSource.data();
  dataSource.remove(products[0]);
  dataSource.sync();
});
</script>

transport.destroy.cache `Boolean`

Example - enable request caching

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    destroy: {
      /* omitted for brevity */
      cache: true
    }
}
});
</script>

transport.destroy.contentType `String`

Example - set content type

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    destroy: {
      /* omitted for brevity */
        contentType: "application/json"
    }
}
});
</script>

transport.destroy.data `Object|Function`

Additional parameters which are sent to the remote service. Refer to the jQuery.ajax documentation for further info.

Example - send additional parameters as an object

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    destroy: {
      /* omitted for brevity */
        data: {
        name: "Jane Doe",
        age: 30
        }
    }
}
});
</script>

Example - send additional parameters by returning them from a function

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    destroy: {
      /* omitted for brevity */
        data: function() {
            return {
          name: "Jane Doe",
          age: 30
        }
    }
}
  }
});
</script>

transport.destroy.dataType `String`

The type of result expected from the server. Commonly used values are "json" and "jsonp". Refer to the jQuery.ajax documentation for further info.

Example - set the data type to JSON

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    destroy: {
      /* omitted for brevity */
        dataType: "json"
    }
}
});
</script>

transport.destroy.type `String`

The type of request to make ("POST", "GET", "PUT" or "DELETE"), default is "GET".

The type option is ignored if dataType is set to "jsonp". JSONP always uses GET requests. Refer to the jQuery.ajax documentation for further info.

Example

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    destroy: {
      /* omitted for brevity */
        type: "POST"
    }
}
});
</script>

transport.destroy.url `String|Function`

The URL to which the request is sent.

If set to function the data source will invoke it and use the result as the URL.

Example - specify URL as a string

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    },
    destroy: {
      url: "http://demos.kendoui.com/service/products/destroy",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    parameterMap: function(data, type) {
      if (type == "destroy") {
        return { models: kendo.stringify(data.models) }
    }
}
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var products = dataSource.data();
  dataSource.remove(products[0]);
  dataSource.sync();
});
</script>

Example - specify URL as a function

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    },
    destroy: {
      url: function (options) {
        return "http://demos.kendoui.com/service/products/destroy",
      },
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    parameterMap: function(data, type) {
      if (type == "destroy") {
        return { models: kendo.stringify(data.models) }
        }
    }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
}
});
dataSource.fetch(function() {
  var products = dataSource.data();
  dataSource.remove(products[0]);
  dataSource.sync();
});
</script>

transport.parameterMap `Function`

The function which converts the request parameters to a format suitable for the remote service. By default the data source sends the parameters using jQuery's conventions.

The parameterMap method is often used to encode the parameters in JSON format.

Parameters

data Object: The parameters which will be sent to the remote service. The value specified in the data field of the transport settings (create, read, update or destroy) is included as well. If batch is set to false the fields of the changed data items are also included.

data.aggregate Array: The current aggregate configuration as set via the aggregate option. Available if the serverAggregates option is set to true and the data source makes a "read" request.

data.group Array: The current grouping configuration as set via the group option. Available if the serverGrouping option is set to true and the data source makes a "read" request.

data.filter Object: The current filter configuration as set via the filter option. Available if the serverFiltering option is set to true and the data source makes a "read" request.

data.models Array: All changed data items. Available if there are any data item changes and the batch option is set to true.

data.page Number: The current page. Available if the serverPaging option is set to true and the data source makes a "read" request.

data.pageSize Number: The current page size as set via the pageSize option. Available if the serverPaging option is set to true and the data source makes a "read" request.

data.skip Number: The number of data items to skip. Available if the serverPaging option is set to true and the data source makes a "read" request.

data.sort Array: The current sort configuration as set via the sort option. Available if the serverSorting option is set to true and the data source makes a "read" request.

data.take Number: The number of data items to return (the same as data.pageSize). Available if the serverPaging option is set to true and the data source makes a "read" request.

type String: The type of the request which the data source makes. The supported values are "create", "read", "update" and "destroy".

Returns

Object the request parameters converted to a format required by the remote service.

Example - convert data source request parameters

<script>

var dataSource = new kendo.data.DataSource({
     transport: {
    read: {
      url: "http://demos.kendoui.com/service/Northwind.svc/Orders?$format=json",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
      jsonp: "$callback",
      cache: true
    },
       parameterMap: function(data, type) {
      if (type == "read") {
        // send take as "$top" and skip as "$skip"
          return {
          $top: data.take,
          $skip: data.skip
       }
     }
    }
  },
  schema: {
    data: "d"
  },
  pageSize: 20,
  serverPaging: true // enable serverPaging so take and skip are sent as request parameters
 });
dataSource.fetch(function() {
  console.log(dataSource.view().length); // displays "20"
});
</script>

Example - send request parameters as JSON

<script>
var dataSource = new kendo.data.DataSource({
     transport: {
    create: {
      url: "http://demos.kendoui.com/service/products/create",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
       parameterMap: function(data, type) {
      if (type == "create") {
        // send the created data items as the "models" service parameter encoded in JSON
        return { models: kendo.stringify(data.models) };
       }
     }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
 });
dataSource.add( { ProductName: "New Product" });
dataSource.sync();
</script>

transport.read `Object|String|Function`

The configuration used when the data source loads data items from a remote service.

The data source uses jQuery.ajax to make a HTTP request to the remote service. The value configured via transport.read is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.read.

If the value of transport.read is a function, the data source invokes that function instead of jQuery.ajax.

If the value of transport.read is a string the data source uses this string as the URL of the remote service.

Example - set the read remote service

<script>
var dataSource = new kendo.data.DataSource({
    transport: {
    // make JSONP request to http://demos.kendoui.com/service/products
        read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  }
});
dataSource.fetch(function() {
  console.log(dataSource.view().length); // displays "77"
});
</script>

Example - send additional parameters to the remote service

<input value="html5" id="search" />
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
            data: {
        q: $("#search").val() // send the value of the #search input to the remote service
            }
        }
    }
});
dataSource.fetch();
</script>

Example - set read as a function

<script>

var dataSource = new kendo.data.DataSource({
    transport: {
        read: function(options) {
      // make JSONP request to http://demos.kendoui.com/service/products

            $.ajax( {
        url: "http://demos.kendoui.com/service/products",
        dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                success: function(result) {
          // notify the data source that the request succeeded

                    options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
                }
            });
        }
    }
});
dataSource.fetch(function() {
  console.log(dataSource.view().length); // displays "77"
});
</script>

transport.read.cache `Boolean`

Example - enable request caching

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read: {
      /* omitted for brevity */
      cache: true
    }
}
});
</script>

transport.read.contentType `String`

Example - set content type

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    create: {
      /* omitted for brevity */
        contentType: "application/json"
    }
}
});
</script>

transport.read.data `Object|Function`

Additional parameters which are sent to the remote service. Refer to the jQuery.ajax documentation for further info.

Example - send additional parameters as an object

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read: {
      url: "http://demos.kendoui.com/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        data: {
        q: "html5" // send "html5" as the "q" parameter
        }
    }
}
});
dataSource.fetch();
</script>

Example - send additional parameters by returning them from a function

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read: {
      url: "http://demos.kendoui.com/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        data: function() {
            return {
          q: "html5" // send "html5" as the "q" parameter
            };
        }
    }
}
});
dataSource.fetch();
</script>

transport.read.dataType `String`

The type of result expected from the server. Commonly used values are "json" and "jsonp". Refer to the jQuery.ajax documentation for further info.

Example - set the data type to JSON

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read: {
      /* omitted for brevity */
        dataType: "json"
    }
}
});
</script>

transport.read.type `String`

The type of request to make ("POST", "GET", "PUT" or "DELETE"), default is "GET".

The type option is ignored if dataType is set to "jsonp". JSONP always uses GET requests. Refer to the jQuery.ajax documentation for further info.

Example - set the HTTP verb of the request

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read: {
      /* omitted for brevity */
        type: "POST"
    }
}
});
</script>

transport.read.url `String|Function`

The URL to which the request is sent.

If set to function the data source will invoke it and use the result as the URL.

Example - specify URL as a string

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
}
});
dataSource.fetch(function() {
  console.log(dataSource.view().length); // displays "77"
});
</script>

Example - specify URL as a function

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read: {
      url: function(options) {
        return "http://demos.kendoui.com/service/products",
        }
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
}
});
dataSource.fetch(function() {
  console.log(dataSource.view().length); // displays "77"
});
</script>

transport.update `Object|String|Function`

The configuration used when the data source saves updated data items. Those are data items whose fields have been updated.

The data source uses jQuery.ajax to make a HTTP request to the remote service. The value configured via transport.update is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.update.

If the value of transport.update is a function, the data source invokes that function instead of jQuery.ajax.

If the value of transport.update is a string the data source uses this string as the URL of the remote service.

Example - specify update as a string

<script>
var dataSource = new kendo.data.DataSource({
    transport: {
    read:  {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
        update: {
      url: "http://demos.kendoui.com/service/products/update",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
            }
  },
  schema: {
    model: { id: "ProductID" }
    }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  dataSource.sync(); makes request to http://demos.kendoui.com/service/products/update
});
</script>

Example - specify update as a function

<script>
var dataSource = new kendo.data.DataSource({
    transport: {
    read: function(options) {
      /* implementation omitted for brevity */
    },
        update: function(options) {
      // make JSONP request to http://demos.kendoui.com/service/products/update

            $.ajax( {
        url: "http://demos.kendoui.com/service/products/update",
        dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        // send the updated data items as the "models" service parameter encoded in JSON
        data: {
          models: kendo.stringify(options.data.models)
        },
                success: function(result) {
          // notify the data source that the request succeeded

                    options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
                }
            });
        }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
    }
});

dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  dataSource.sync(); makes request to http://demos.kendoui.com/service/products/update
});
</script>

transport.update.cache `Boolean`

Example - enable request caching

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    update: {
      /* omitted for brevity */
      cache: true
    }
}
});
</script>

transport.update.contentType `String`

Example - set content type

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    update: {
      /* omitted for brevity */
        contentType: "application/json"
    }
}
});
</script>

transport.update.data `Object|Function`

Additional parameters which are sent to the remote service. Refer to the jQuery.ajax documentation for further info.

Example - send additional parameters as an object

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    update: {
      /* omitted for brevity */
        data: {
        name: "Jane Doe",
        age: 30
        }
    }
}
});
</script>

Example - send additional parameters by returning them from a function

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    update: {
      /* omitted for brevity */
        data: function() {
            return {
          name: "Jane Doe",
          age: 30
        }
    }
}
  }
});
</script>

transport.update.dataType `String`

The type of result expected from the server. Commonly used values are "json" and "jsonp". Refer to the jQuery.ajax documentation for further info.

Example - set the data type to JSON

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    update: {
      /* omitted for brevity */
        dataType: "json"
    }
}
});
</script>

transport.update.type `String`

The type of request to make ("POST", "GET", "PUT" or "DELETE"), default is "GET".

The type option is ignored if dataType is set to "jsonp". JSONP always uses GET requests. Refer to the jQuery.ajax documentation for further info.

Example - set the HTTP verb of the request

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    update: {
      /* omitted for brevity */
        type: "POST"
    }
}
});
</script>

transport.update.url `String|Function`

The URL to which the request is sent.

If set to function the data source will invoke it and use the result as the URL.

Example - specify URL as a string

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read:  {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: "http://demos.kendoui.com/service/products/update",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  schema: {
    model: { id: "ProductID" }
}
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  dataSource.sync();
});
</script>

Example - specify URL as a function

<script>
var dataSource = new kendo.data.DataSource({
transport: {
    read:  {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: function(options) {
        return "http://demos.kendoui.com/service/products/update",
      },
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        }
  },
  schema: {
    model: { id: "ProductID" }
    }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  dataSource.sync();
});
</script>

type `String`

If set the data source will use a predefined transport and/or schema. The only supported value is "odata" which supports the OData v.2 protocol.

Example - enable OData support

<script>
var dataSource= new kendo.data.DataSource({
  type: "odata",
  transport: {
    read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
  },
  pageSize: 20,
  serverPaging: true
});
dataSource.fetch(function() {
  console.log(dataSource.view().length); // displays "20"
});
</script>

Methods

add

Appends a data item to the data source.

Parameters

model Object|kendo.data.Model: Either a kendo.data.Model instance or JavaScript object containing the data item field values.

Returns

kendo.data.Model the data item which is inserted.

Example - add a data item to a local data source

<script>
var dataSource= new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 }
  ]
});
dataSource.add({ name: "John Doe", age: 33 });
var data = dataSource.data();
var lastItem = data[data.length - 1];
console.log(lastItem.name); // displays "John Doe"
console.log(lastItem.age); // displays "33"
</script>

Example - add a data item to a remote data source

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    // make JSONP request to http://demos.kendoui.com/service/products/create
    create: {
      url: "http://demos.kendoui.com/service/products/create",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    parameterMap: function(data, type) {
      if (type == "create") {
        // send the created data items as the "models" service parameter encoded in JSON
        return { models: kendo.stringify(data.models) };
      }
    }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
});
// add a new data item
dataSource.add( { ProductName: "New Product" });
// save the created data item
dataSource.sync();
</script>

aggregate

Gets or sets the aggregate configuration.

Parameters

value Object|Array: The aggregate configuration. Accepts the same values as the aggregate option.

Returns

Array the current aggregate configuration.

Example - set the data source aggregates

<script>
var dataSource= new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
// calculate the minimum and maximum age
dataSource.aggregate([
  { field: "age", aggregate: "min" },
  { field: "age", aggregate: "max" }
]);
var ageAggregates = dataSource.aggregates().age;
console.log(ageAggregates.min); // displays "30"
console.log(ageAggregates.max); // displays "33"
</script>

Example - get the data source aggregates

<script>
var dataSource= new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  aggregate: [
    { field: "age", aggregate: "min" },
    { field: "age", aggregate: "max" }
  ]
});
var aggregates = dataSource.aggregate();
console.log(kendo.stringify(aggregates[0])); // displays {"aggregate": "min", "field": "age"}
</script>

aggregates

Returns the aggregate results.

Returns

Object the aggregate results. There is a key for every aggregated field.

Example - get aggregate results

<script>
var dataSource= new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  aggregate: [
    { field: "age", aggregate: "min" },
    { field: "name", aggregate: "max" }
  ]
});
var ageAggregates = dataSource.aggregates().age;
console.log(ageAggregates.min); // displays "30"
console.log(ageAggregates.max); // displays "33"
</script>

at

Returns the data item at the specified index. The index is zero-based.

Parameters

index Number: The zero-based index of the data item.

Returns

kendo.data.ObservableObject the data item at the specified index. Returns undefined if a data item is not found at the specified index. Returns a kendo.data.Model instance if the schema.model option is set.

Example - get a data item

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ]
});
dataSource.fetch(function(){
  var dataItem = dataSource.at(0);
  console.log(dataItem.name); // displays "Jane Doe"
  var dataItemWhichDoesNotExist = dataSource.at(3);
  console.log(dataItemWhichDoesNotExist); // displays "undefined"
});
</script>

cancelChanges

Cancels any pending changes in the data source. Deleted data items are restored, new data items are removed and updated data items are restored to their initial state.

Parameters

model kendo.data.Model: The optional data item (model). If specified only the changes of this data item will be discarded. If omitted all changes will be discarded.

Example - cancel all changes

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { id: 1, name: "Jane Doe" }
  ],
  schema: {
    model: { id: "id" }
  }
});
dataSource.fetch(function(){
  // add a new data item
  dataSource.add({ name: "John Doe" });
  // update existing data item
  var dataItem = dataSource.at(0);
  dataItem.set("name", "Jane Doe 2");
  // cancel all changes
dataSource.cancelChanges();
  dataItem = dataSource.at(0);
  console.log(dataItem.name); // displays "Jane Doe"
  console.log(dataSource.data().length); // displays "1"
});
</script>

Example - cancel changes of only one data item

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { id: 1, name: "Jane Doe" }
  ],
  schema: {
    model: { id: "id" }
  }
});
dataSource.fetch(function(){
  // add a new data item
  dataSource.add({ name: "John Doe" });
  // update existing data item
  var dataItem = dataSource.at(0);
  dataItem.set("name", "Jane Doe 2");
  // cancel the changes of the dataItem
  dataSource.cancelChanges(dataItem);
  console.log(dataItem.name); // displays "Jane Doe"
  console.log(dataSource.data().length); // displays "2"
});
</script>

data

Gets or sets the data items of the data source.

If the data source is bound to a remote service (via the transport option) the data method will return the service response. Every item from the response is wrapped in a kendo.data.ObservableObject or kendo.data.Model (if the schema.model option is set).

If the data source is bound to a JavaScript array (via the data option) the data method will return the items of that array. Every item from the array is wrapped in a kendo.data.ObservableObject or kendo.data.Model (if the schema.model option is set).

If the data source is grouped (via the group option or the group method) and the serverGrouping is set to true the data method will return the group items.

Parameters

value Array|kendo.data.ObservableArray: The data items which will replace the current ones in the data source. If omitted the current data items will be returned.

Returns

kendo.data.ObservableArray the data items of the data source. Returns empty array if the data source hasn't been populated with data items via the read, fetch or query methods.

Example - get the data items when bound to array

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ]
});
dataSource.fetch(function(){
var data = dataSource.data();
  console.log(data.length);  // displays "2"
  console.log(data[0].name); // displays "Jane Doe"
  console.log(data[1].name); // displays "John Doe"
});
</script>

Example - get the data items when bound to a remote service

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read:  {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
}
  }
});
dataSource.fetch(function(){
  var data = dataSource.data();
  console.log(data.length);  // displays "77"
  console.log(data[0].ProductName); // displays "Chai"
});
</script>

Example - set the data items

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" }
  ]
});
dataSource.fetch(function(){
  dataSource.data([ { name: "John Doe" } ]);
  var data = dataSource.data();
  console.log(data[0].name); // displays "John Doe"
});
</script>

fetch

Reads the data items from a remote service (if the transport option is set) or from a JavaScript array (if the data option is set).

The fetch method makes a request to the remote service only the first time it is called.

Parameters

callback Function(optional): The optional function which is executed when the remote request is finished. The function context (available via the this keyword) will be set to the data source instance.

Example - read data from a remote data source

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read:  {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  }
});
// read the data items from http://demos.kendoui.com/service/products
dataSource.fetch(function(){
  var data = this.data();
  console.log(data.length);  // displays "77"
  console.log(data[0].ProductName); // displays "Chai"
});
</script>

filter

Gets or sets the filter configuration.

Parameters

value Object(optional): The filter configuration. Accepts the same values as the filter option.

Returns

Object the current filter configuration.

Example - set the data source filter

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
    ]
});
dataSource.filter( { field: "name", operator: "startswith", value: "Jane" });
var view = dataSource.view();
console.log(view.length);
console.log(view[0].name); // displays "Jane Doe"
</script>

Example - get the data source filter

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  filter: { field: "name", operator: "startswith", value: "Jane" }
});
var filter = dataSource.filter();
console.log(filter.logic);  // displays "and"
console.log(filter.filters[0]); displays '{field: "name", operator: "startswith", value: "Jane"}'
</script>

get

Gets the data item (model) with the specified id.

The get method requires the schema.model option to be set and the id of the model to be specified.

Parameters

id Number|String: The id of the model to look for.

Returns

kendo.data.Model the model instance. Returns undefined if a model with the specified id is not found.

Example - find a model by id

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    {id: 1, name: "Jane Doe" },
    {id: 2, name: "John Doe" }
  ],
  schema: {
    model: { id: "id" }
  }
});
dataSource.fetch(function() {
  var dataItem = dataSource.get(1);
  console.log(dataItem.name); // displays "Jane Doe"
});
</script>

getByUid

Gets the data item (model) with the specified uid.

Parameters

uid String: The uid of the model to look for.

Returns

kendo.data.ObservableObject the model instance. Returns undefined if a model with the specified uid is not found.

group

Gets or sets the grouping configuration.

Parameters

value Object|Array: The grouping configuration. Accepts the same values as the group option.

Returns

Array the current grouping configuration.

Example - group the data items

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ]
});
dataSource.group({ field: "category" });
var view = dataSource.view();
console.log(view.length); // displays "2"
var beverages = view[0];
console.log(beverages.value); // displays "Beverages"
console.log(beverages.items[0].name); // displays "Tea"
console.log(beverages.items[1].name); // displays "Coffee"
var food = view[1];
console.log(food.value); // displays "Food"
console.log(food.items[0].name); // displays "Ham"
</script>

Example - get the data source grouping configuration

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  group: { field: "category" }
});
var groups = dataSource.group();
console.log(groups.length); // displays "1"
console.log(groups[0].field); // displays "category"
</script>

hasChanges `Boolean`

Cheks if the data itams have changed.

Returns

Boolean returns true if the data items have changed. Otherwise, false.

Example - check if the data source has changes

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { id: 1, name: "Jane Doe" }
  ],
  schema: {
    model: { id: "id" }
  }
});
dataSource.fetch(function() {
  console.log(dataSource.hasChanges()); // displays "false"
  dataSource.add({ name: "John Doe" });
  console.log(dataSource.hasChanges()); // displays "true"
});
</script>

indexOf

Gets the index of the specified data item.

Parameters

dataItem kendo.data.ObservableObject: The target data item.

Returns

Number the index of the specified data item. Returns -1 if the data item is not found.

Example - get the index of a data item

<script>
var dataSource= new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
dataSource.fetch(function() {
  var dataItem = dataSource.at(0);
  var index = dataSource.indexOf(dataItem);
  console.log(index); // displays "0"
});
</script>

insert

Inserts a data item in the data source at the specified index.

Parameters

index Number: The zero-based index at which the data item will be inserted.

model Object|kendo.data.ObservableObject|kendo.data.Model: Either a kendo.data.Model instance or JavaScript object containing the field values.

Returns

kendo.data.Model the data item which is inserted.

Example - insert a data item

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { id: 1, name: "Jane Doe" }
  ],
  schema: {
    model: { id: "id" }
  }
});
dataSource.fetch(function() {
  var dataItem = dataSource.insert(0, { name: "John Doe" });
  var index = dataSource.indexOf(dataItem);
  console.log(index); // displays "0"
});
</script>

page

Gets or sets the current page.

Parameters

page Number: The new page.

Returns

Number the current page.

Example - set the current page

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  pageSize: 1
});
dataSource.fetch(function() {
  dataSource.page(2);
  var view = dataSource.view();
  console.log(view[0].name); // displays "John Doe"
});
</script>

Example - get the current page

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  pageSize: 1,
  page: 2
});
console.log(dataSource.page()); // displays "2"

pageSize

Gets or sets the current page size.

Parameters

size Number: The new page size.

Returns

Number the current page size.

Example - set the page size

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ]
});
dataSource.pageSize(1);
dataSource.fetch(function() {
  dataSource.page(2);
  var view = dataSource.view();
  console.log(view[0].name); // displays "John Doe"
});
</script>

Example - get the page size

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  pageSize: 1
});
console.log(dataSource.pageSize()); // displays "1"
</script>

query

Executes the specified query over the data items. Makes a HTTP request if bound to a remote service.

Parameters

options Object(optional): The query options which should be applied.

options.aggregate Array(optional): The aggregate configuration. Accepts the same values as the aggregate option. The query method will request the remote service if the serverAggregates option is set to true.

options.filter Object|Array(optional): The filter configuration. Accepts the same values as the filter option. The query method will request the remote service if the serverFiltering option is set to true.

options.group Object|Array(optional): The grouping configuration. Accepts the same values as the filter option. The query method will request the remote service if the serverGrouping option is set to true.

options.page Number(optional): The page of data to return. The query method will request the remote service if the serverPaging option is set to true.

options.pageSize Number(optional): The number of data items to return. The query method will request the remote service if the serverPaging option is set to true.

options.sort Object|Array(optional): The sort configuration. Accepts the same values as the sort option. The query method will request the remote service if the serverSorting option is set to true.

Example - query the data source

<script>
var dataSource = new kendo.data.DataSource({
    transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  change: function(e) {
    var view = this.view();
    console.log(view[0].ProductName); // displays "Manjimup Dried Apples"
    }
});
// sort by "ProductName" and get the third page with page size set to 20
dataSource.query({
  sort: { field: "ProductName", dir: "desc" },
  page: 3,
  pageSize: 20
});
</script>

read

Reads data items from a remote service (if the transport option is set) or from a JavaScript array (if the data option is set).

The read method always makes a request to the remote service.

Parameters

data Object(optional): Optional data to pass to the remote service.

Example - read data from a remote service

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    }
  },
  change: function(e) {
    var view = this.view();
    console.log(view[0].ProductName); // displays "Chai"
  }
});
dataSource.read();
</script>

remove

Removes the specified data item from the data source.

Parameters

model kendo.data.Model: The data item which should be removed.

Example - remove a data item

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { id: 1, name: "Jane Doe" },
    { id: 2, name: "John Doe" }
  ],
  schema: {
    model: { id: "id" }
  }
});
dataSource.fetch(function() {
  var dataItem = dataSource.at(0);
  dataSource.remove(dataItem);
  var data = dataSource.data();
  console.log(data.length);  // displays "1"
  console.log(data[0].name); // displays "John Doe"
});
</script>

sort

Gets or sets the sort order which will be applied over the data items.

Parameters

value Object|Array: The sort configuration. Accepts the same values as the sort option.

Returns

Array the current sort configuration.

Example - sort the data items

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
dataSource.sort({ field: "age", dir: "desc" });
var view = dataSource.view();
console.log(view[0].name); // displays "John Doe"
</script>

Example - get the sort configuration

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  sort: { field: "age", dir: "desc" }
});
var sort = dataSource.sort();
console.log(sort.length);   // displays "1"
console.log(sort[0].field); // displays "age"
</script>

sync

Saves any data item changes.

The sync method will request the remote service if:

the transport.create option is set and the data source contains new data items
the transport.destroy option is set and data items have been removed from the data source
the transport.update option is set and the data source contains updated data items

Example - save the changes

<script>
var dataSource = new kendo.data.DataSource({
  batch: true,
  transport: {
    read:  {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: "http://demos.kendoui.com/service/products/update",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    destroy: {
      url: "http://demos.kendoui.com/service/products/destroy",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  var anotherProduct = dataSource.at(1);
  anotherProduct.set("UnitPrice", 20);
  var yetAnotherProduct = dataSource.at(2);
  dataSource.remove(yetAnotherProduct);
  dataSource.sync(); // makes a request to http://demos.kendoui.com/service/products/update" and http://demos.kendoui.com/service/products/destroy
});
</script>

total

Gets the total number of data items. Uses schema.total if the transport.read option is set.

Returns

Number the total number of data items. Returns the length of the array returned by the data method if schema.total or transport.read are not set. Returns 0 if the data source hasn't been populated with data items via the read, fetch or query methods.

Example - get the total number of data items

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
dataSource.fetch(function() {
  console.log(dataSource.total()); // displays "2"
});
</script>

totalPages

Gets the number of available pages.

Returns

Number the available pages.

Example - get the total number of pages

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  pageSize: 1
});
console.log(dataSource.totalPages());   // displays "2"
</script>

view

Returns the data items which correspond to the current page, filter, sort and group configuration.

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();
  console.log(view.length); // displays "1"
  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();
  console.log(view.length); // displays "1"
  var beverages = view[0];
  console.log(beverages.value); // displays "Beverages"
  console.log(beverages.items.length); // displays "2"
  console.log(beverages.items[0].name); // displays "Coffee"
  console.log(beverages.items[1].name); // displays "Tea"
});
</script>

Events

change

Fired when the data source is populated from a JavaScript array or a remote service, a data item is inserted, updated or removed, the data items are paged, sorted, filtered or grouped.

The event handler function context (available via the this keyword) will be set to the data source instance.

Event Data

e.sender kendo.data.DataSource: The data source instance which fired the event.

Example - subscribe to the "change" event during initialization

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  change: function(e) {
    var data = this.data();
    console.log(data.length); // displays "77"
  }
});
dataSource.fetch();
</script>

Example - subscribe to the "change" event after initialization

<script>
function dataSource_change(e) {
  var data = this.data();
  console.log(data.length); // displays "77"
}
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  }
});
dataSource.bind("change", dataSource_change);
dataSource.fetch();
</script>

error

Fired when a request to the remote service fails.

The event handler function context (available via the this keyword) will be set to the data source instance.

If the schema.errors option is set and the server response contains that field then the error event will be fired. The errors field of the event argument will contain the errors returned by the server.

Event Data

e.errorThrown Object(optional): Optional exception.

e.sender kendo.data.DataSource: The data source instance which fired the event.

e.status String: String describing the type of the error

e.xhr Object: The current jqXHR.

Example - subscribe to the "error" event during initialization

<script>
function dataSource_error(e) {
  console.log(e.status); // displays "error"
}
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/"
    }
  }
});
dataSource.bind("error", dataSource_error);
dataSource.fetch();
</script>

requestEnd

Fired when a remote service request is finished.

The event handler function context (available via the this keyword) will be set to the data source instance.

Event Data

e.response Object: The raw remote service response.

e.sender kendo.data.DataSource: The data source instance which fired the event.

e.type String: The type of the request. Set to "create", "read", "update" or "destroy".

Example - subscribe to the "requestEnd" event during initialization

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    }
  },
  requestEnd: function(e) {
    var response = e.response;
    var type = e.type;
    console.log(type); // displays "read"
    console.log(response.length); // displays "77"
  }
});
dataSource.fetch();
</script>

Example - subscribe to the "requestEnd" event after initialization

<script>
function dataSource_requestEnd(e) {
  var response = e.response;
  var type = e.type;
  console.log(type); // displays "read"
  console.log(response.length); // displays "77"
}
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    }
  }
});
dataSource.bind("requestEnd", dataSource_requestEnd);
dataSource.fetch();
</script>

requestStart

Fired when the data source makes a remote service request.

The event handler function context (available via the this keyword) will be set to the data source instance.

Event Data

e.sender kendo.data.DataSource: The data source instance which fired the event.

Example - subscribe to the "requestStart" event during initialization

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    }
  },
  requestStart: function(e) {
    console.log("request started");
  }
});
dataSource.fetch();
</script>

Example - subscribe to the "requestStart" event after initialization

<script>
function dataSource_requestStart(e) {
  console.log("request started");
}
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/products",
      dataType: "jsonp"
    }
  }
});
dataSource.bind("requestEnd", dataSource_requestStart);
dataSource.fetch();
</script>

sync

Fired after the data source saves data item changes. The data source saves the data item changes when the sync method is called.

The event handler function context (available via the this keyword) will be set to the data source instance.

The sync event is fired after all remote requests finish.

Event Data

e.sender kendo.data.DataSource: The data source instance which fired the event.

Example - subscribe to the "sync" event during initialization

<script>
var dataSource = new kendo.data.DataSource({
  batch: true,
  transport: {
    create: {
      url: "http://demos.kendoui.com/service/products/create",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    parameterMap: function(data) {
      return { models: kendo.stringify(data.models) };
    }
  },
  sync: function(e) {
    console.log("sync complete");
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.add( { ProductName: "Ham" } );
dataSource.sync();
</script>

Example - subscribe to the "sync" event after initialization

<script>
function dataSource_sync(e) {
  console.log("sync complete");
}
var dataSource = new kendo.data.DataSource({
  batch: true,
  transport: {
    create: {
      url: "http://demos.kendoui.com/service/products/create",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    parameterMap: function(data) {
      return { models: kendo.stringify(data.models) };
    }
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.bind("sync", dataSource_sync);
dataSource.add( { ProductName: "Ham" } );
dataSource.sync();
</script>

Class methods

create

Creates a data source instance using the specified configuration. If the configuration is a data source instance the same instance will be returned.

Returns

kendo.data.DataSource the new data source instance.

Parameters

options Object: The data source configuration.

Example - parsing the dataSource configuration option in a custom widget

<script>
var dataSource = kendo.data.DataSource.create({
  data: [
    { name: "Jane Doe" }
  ]
});
</script>

Page rendered at 5/20/2013 5:19:47 AM UTC.