Kendo DataSource

Kendo UI Docs

Complete Kendo UI Documentation

Get Kendo UI

• 
  
• API Reference
• Getting Started
• How Do I?
• Tutorials
• Demos

API Reference

• dataviz
• framework
  • fx
  • Binder
  • Class
  • DataSource
  • Draggable
  • DropTarget
  • DropTargetArea
  • Fx
  • HierarchicalDataSource
  • Kendo
  • Layout
  • Model
  • Node
  • Observable
  • ObservableArray
  • ObservableObject
  • Router
  • Validator
  • View
  • Widget
  • Widget
• mobile
• web
• wrappers

Get Kendo UI

HomeAPI Referenceframeworkkendo.data.DataSource

---

kendo.data.DataSource

• Configuration (66)
• Methods (24)
• Events (5)

Configuration

aggregateArray

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

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

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>

autoSyncBoolean(default: false)

If set to true the data source would automatically save any changed data items by calling thesync 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>

batchBoolean(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 sourcemakes a HTTP request for every CRUD operation.

The changed data items are sent by default as models. This can be changed via theparameterMap 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>

dataArray|String

The array of data items which the data source contains. The data source will wrap those items askendo.data.ObservableObject orkendo.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: "@cover"      }    }  }});dataSource.fetch(function() {  var books = dataSource.data();  console.log(books[0].title); // displays "Secrets of the JavaScript Ninja"});</script>

filterArray|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.fieldString

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

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

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>

groupArray|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.aggregatesArray

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

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

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.dirString(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.fieldString

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>

pageNumber

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>

pageSizeNumber

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>

schemaObject

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.aggregatesFunction|String

The field from the response which contains the aggregate results. Can be set to a function which is called toreturn 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.dataFunction|String

The field from the server response which contains the data items. Can be set to a functin which is called toreturn 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.errorsFunction|String(default: "errors")

The field from the server response which contains server-side errors. Can be set to a function which is called toreturn the errors for response. If there are any errors theerror 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.groupsFunction|String

The field from the server response which contains the groups. Can be set to a function which is called toreturn 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.modelObject|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 willnot 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.parseFunction

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.totalFunction|String

The field from the server response which contains the total number of data items. Can be set to a function which is called toreturn 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.typeString(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>

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

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

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

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

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

sortArray|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.dirString

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

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>

transportObject

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). Thetransport option describes the remote service configuration - URL, HTTP verb, HTTP headers etc.Thetransport 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.createObject|String|Function

The configuration used when the data source saves newly created data items. Those are items added to the data source via theadd orinsert methods.

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

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

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

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 itemdataSource.add( { ProductName: "New Product" });// save the created data itemdataSource.sync();</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.cacheBoolean

If set to false the request result will not be cached by the browser. Setting cache tofalse 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 thejQuery.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.contentTypeString

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 thejQuery.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.dataObject|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.dataTypeString

The type of result expected from the server. Commonly used values are "json" and "jsonp".Refer to thejQuery.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.typeString(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 thejQuery.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.urlString|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.destroyObject|String|Function

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

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

If the value of transport.destroy is a function, the data source invokes that function instead ofjQuery.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.cacheBoolean

If set to false the request result will not be cached by the browser. Setting cache tofalse 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 thejQuery.ajax documentation for further info.

Example - enable request caching

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

transport.destroy.contentTypeString

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 thejQuery.ajax documentation for further info.

Example - set content type

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

transport.destroy.dataObject|String|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.dataTypeString

The type of result expected from the server. Commonly used values are "json" and "jsonp".Refer to thejQuery.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.typeString

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 thejQuery.ajax documentation for further info.

Example

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

transport.destroy.urlString|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.parameterMapFunction

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

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 thedata field of the transport settings (create, read, update or destroy) is included as well.Ifbatch 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 theserverPaging option is set totrue 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.readObject|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 viatransport.read is passed tojQuery.ajax. This means that you can set all options supported byjQuery.ajax viatransport.read.

If the value of transport.read is a function, the data source invokes that function instead ofjQuery.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.cacheBoolean

If set to false the request result will not be cached by the browser. Setting cache tofalse 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 thejQuery.ajax documentation for further info.

Example - enable request caching

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

transport.read.contentTypeString

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 thejQuery.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.read.dataObject|String|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.dataTypeString

The type of result expected from the server. Commonly used values are "json" and "jsonp".Refer to thejQuery.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.typeString

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 thejQuery.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.urlString|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.updateObject|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 viatransport.update is passed tojQuery.ajax. This means that you can set all options supported byjQuery.ajax viatransport.update.

If the value of transport.update is a function, the data source invokes that function instead ofjQuery.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.cacheBoolean

If set to false the request result will not be cached by the browser. Setting cache tofalse 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 thejQuery.ajax documentation for further info.

Example - enable request caching

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

transport.update.contentTypeString

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 thejQuery.ajax documentation for further info.

Example - set content type

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

transport.update.dataObject|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.dataTypeString

The type of result expected from the server. Commonly used values are "json" and "jsonp".Refer to thejQuery.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.typeString

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 thejQuery.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.urlString|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>

typeString

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 itemdataSource.add( { ProductName: "New Product" });// save the created data itemdataSource.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 agedataSource.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. Returnsundefined if a data item is not found at the specified index.Returns akendo.data.Model instance if theschema.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 changesdataSource.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 akendo.data.ObservableObject orkendo.data.Model (if theschema.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 akendo.data.ObservableObject orkendo.data.Model (if theschema.model option is set).

If the data source is grouped (via the group option or the group method) and the serverGrouping is set to truethe 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 theread,fetch orquery 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 thethis 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/productsdataSource.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>

hasChangesBoolean

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 theserverAggregatesoption is set totrue.

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 theserverFilteringoption is set totrue.

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 theserverGroupingoption is set totrue.

options.page Number(optional)

The page of data to return.The query method will request the remote service if theserverPagingoption is set totrue.

options.pageSize Number(optional)

The number of data items to return.The query method will request the remote service if theserverPagingoption is set totrue.

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 theserverSortingoption is set totrue.

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 20dataSource.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 thedata method ifschema.total ortransport.read are not set.Returns 0 if the data source hasn't been populated with data items via theread, 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 thegroup option or thegroup 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 theerror event will be fired. Theerrors 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 thesync 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/2/2013 3:23:37 AM UTC.

Back to Top

转载请著名出处: 找网网-职业(程序员 UI设计 产品经理...)常用网站导航