transport.create Object|String|Function
The configuration used when the data source saves newly created data items. Those are items added to the data source via the add or insert methods.
The data source uses jQuery.ajax to make an HTTP request to the remote service. The value configured via
transport.create
is passed to jQuery.ajax. This means that you can set all options supported byjQuery.ajax
viatransport.create
except thesuccess
anderror
callback functions which are used by the transport.
If the value of transport.create
is a function, the data source invokes that function instead of jQuery.ajax
. Check the jQuery documentation for more details on the provided argument.
If the value of transport.create
is a string, the data source uses this string as the URL of the remote service.
- The remote service must return the inserted data items and the data item field configured as the
id
must be set. For example, if theid
of the data item isProductID
, the"create"
server response must be[{ "ProductID": 79, "AnotherProperties": "value"}]
including the ID and the other properties of the data items.- All transport actions (read, update, create, destroy) must be defined in the same way, that is, as functions or as objects. Mixing the different configuration alternatives is not possible.
Example - set the create remote service
<script>
var dataSource = new kendo.data.DataSource({
transport: {
// make JSONP request to https://demos.telerik.com/kendo-ui/service/products/create
create: {
url: "https://demos.telerik.com/kendo-ui/service/products/create",
dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
},
parameterMap: function(data, type) {
if (type == "create") {
// send the created data items as the "models" service parameter encoded in JSON
return { models: kendo.stringify(data.models) };
}
}
},
batch: true,
schema: {
model: { id: "ProductID" }
}
});
// create a new data item
dataSource.add( { ProductName: "New Product" });
// save the created data item
dataSource.sync(); // server response is [{"ProductID":78,"ProductName":"New Product","UnitPrice":0,"UnitsInStock":0,"Discontinued":false}]
</script>
Example - set create as a function
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
/* implementation omitted for brevity */
},
create: function(options) {
// make JSONP request to https://demos.telerik.com/kendo-ui/service/products/create
$.ajax({
url: "https://demos.telerik.com/kendo-ui/service/products/create",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
// send the created data items as the "models" service parameter encoded in JSON
data: {
models: kendo.stringify(options.data.models)
},
success: function(result) {
// notify the data source that the request succeeded
options.success(result);
},
error: function(result) {
// notify the data source that the request failed
options.error(result);
}
});
}
},
batch: true,
schema: {
model: { id: "ProductID" }
}
});
dataSource.add( { ProductName: "New Product" });
dataSource.sync();
</script>
transport.create.cache Boolean
If set to false
, the request result will not be cached by the browser. Setting cache
to false
will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. By default, "jsonp"
requests are not cached.
Refer to the jQuery.ajax documentation for further information.
Example - enable request caching
<script>
var dataSource = new kendo.data.DataSource({
transport: {
create: {
/* omitted for brevity */
cache: true
}
}
});
</script>
transport.create.contentType String
The content-type HTTP header sent to the server. The default is "application/x-www-form-urlencoded"
. Use "application/json"
if the content is JSON. Refer to the jQuery.ajax documentation for further information.
Example - set a content type
<script>
var dataSource = new kendo.data.DataSource({
transport: {
create: {
/* omitted for brevity */
contentType: "application/json"
}
}
});
</script>
transport.create.data Object|Function
Additional parameters that are sent to the remote service. The parameter names must not match reserved words, which are used by the Kendo UI DataSource for sorting, filtering, paging, and grouping.
Refer to the jQuery.ajax documentation for further information.
Example - send additional parameters as an object
<script>
var dataSource = new kendo.data.DataSource({
transport: {
create: {
/* omitted for brevity */
data: {
name: "Jane Doe",
age: 30
}
}
}
});
</script>
Example - send additional parameters by returning them from a function
<script>
var dataSource = new kendo.data.DataSource({
transport: {
create: {
/* omitted for brevity */
data: function() {
return {
name: "Jane Doe",
age: 30
}
}
}
}
});
</script>
transport.create.dataType String
The type of result expected from the server. Commonly used values are "json"
and "jsonp"
.
Refer to the jQuery.ajax documentation for further information.
Example - set the data type to JSON
<script>
var dataSource = new kendo.data.DataSource({
transport: {
create: {
/* omitted for brevity */
dataType: "json"
}
}
});
</script>
transport.create.type String
(default: "GET")
The type of request to make ("POST"
, "GET"
, "PUT"
or "DELETE"
). The default request is "GET"
.
The
type
option is ignored ifdataType
is set to"jsonp"
. JSONP always uses GET requests.
Refer to the jQuery.ajax documentation for further information.
Example - set the HTTP verb of the request
<script>
var dataSource = new kendo.data.DataSource({
transport: {
create: {
/* omitted for brevity */
type: "POST"
}
}
});
</script>
transport.create.url String|Function
The URL to which the request is sent.
If set to a function, the data source will invoke it and use the result as the URL.
Example - specify the URL as a string
<script>
var dataSource = new kendo.data.DataSource({
transport: {
create: {
url: "https://demos.telerik.com/kendo-ui/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 the URL as a function
<script>
var dataSource = new kendo.data.DataSource({
transport: {
create: {
url: function(options) {
return "https://demos.telerik.com/kendo-ui/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>