define
Defines a new Model
type by using the provided options. The returned value inherits from the kendo.data.Model
class.
Example - define a model
<button id="update-name">Change Name</button>
<button id="update-age">Change Age</button>
<script>
var Person = kendo.data.Model.define({
id: "personId", // the identifier of the model
fields: {
"personId": {
defaultValue: 0,
type: "number"
},
"name": {
type: "string"
},
"age": {
parse: (value) => kendo.parseInt(value), // Parse the value manually.
nullable: true, // Age can be null
editable: false, // Age cannot be edited.
}
}
});
var person = new Person({
name: "John Doe",
age: 42
});
var person2 = new Person({
name: "James Doe",
age: null
});
$(document.body).append(`<div><h3>Person 1</h3><p>Name - ${person.get("name")}, Type - ${typeof(person.get("name"))}</p><p>Age - ${person.get("age")}, Type - ${typeof(person.get("age"))}</p></div>`);
$(document.body).append(`<div><h3>Person 2</h3><p>Name - ${person2.get("name")}, Type - ${typeof(person2.get("name"))}</p><p>Age - ${person2.get("age")}, Type - ${typeof(person2.get("age"))}</p></div>`);
$("#update-name").on("click", (e) => {
person.set("name", "Test Name");
$(document.body).append(`<div><h3>Updated Person 1</h3><p>Name - ${person.get("name")}, Type - ${typeof(person.get("name"))}</p><p>Age - ${person.get("age")}, Type - ${typeof(person.get("age"))}</p></div>`);
});
// The age will not be updated through the `set` method because the field is not editable.
$("#update-age").on("click", (e) => {
person.set("age", 1645);
$(document.body).append(`<div><h3>Updated Person 1</h3><p>Name - ${person.get("name")}, Type - ${typeof(person.get("name"))}</p><p>Age - ${person.get("age")}, Type - ${typeof(person.get("age"))}</p></div>`);
});
</script>
Parameters
options Object
Describes the configuration options of the new model type.
options.id String
The name of the field which acts as the identifier of the model. The identifier is used to determine if a model instance is new or existing. If the value of the specified field is equal to the default value that is specified through the fields
configuration, the model is considered new.
options.fields Object|Array
A set of key/value pairs that configure the model fields. The key specifies the name of the field. Quote the key if it contains spaces or other symbols which are not valid for a JavaScript identifier.
A field configuration cannot contain configurations for nested fields.
options.fields.fieldName.defaultValue
Specifies the default value which will be used for the field when a new model instance is created. The default settings depend on the type of the field. The default value for a string is ""
, for a number is 0
, and for a date is new Date()
(today).
If
options.fields.fieldName.nullable
is set totrue
the defaultValue will be ignored when a new model is created.
The parameter can also be set to a function that returns the dynamic default values of the fields. For a live demo, refer to this how-to example.
options.fields.fieldName.editable Boolean
Specifies if the field is editable or not. Defaults to true
.
options.fields.fieldName.nullable Boolean
Specifies if the defaultValue
setting will be used. If set to true, the defaultValue will be ignored and new models will be created with null
field value. Defaults to false
.
options.fields.fieldName.parse Function
Specifies the function which will parse the field value. If not set, the default parsers will be used.
options.fields.fieldName.type String
Specifies the type of the field.
The available dataType options are:
"string"
"number"
"boolean"
"date"
"object"
- (Default)
"default"
options.fields.fieldName.from String
Specifies the field of the original record whose value is used to populate the Model field. When CRUD operations (specifically, adding new items) are enabled, the original field name should be defined with a defaultValue
as well. The reason for this is that during updates and creates, the Kendo UI DataSource will try to construct a data item object which matches the original (server-side) data item structure. For more information and examples, refer to the article on how to use nested model properties.
options.fields.fieldName.validation Object
Specifies the validation options which will be used by the Kendo UI Validator.
Example - define the fields of a model
<script>
var Product = kendo.data.Model.define( {
id: "id", // the identifier is the "id" field (declared below)
fields: {
/* name of the field */ name: {
type: "string", // the field is a string
validation: { // validation rules
required: {
message: "Custom required message" // the message that is displayed when an empty value is about to be saved
}
},
defaultValue: "<empty>" // default field value
},
/* name of the field */ price: {
type: "number", // the field is a number
validation: { // validation rules
required: true, // the field is required
min: 1 // the minimum value is 1
},
defaultValue: 99.99 // default field value
},
/* name of the field */ id: {
editable: false, // this field is not editable
nullable: true // a default value will not be assigned
}
}
});
var product = new Product();
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(product.get("price")); // outputs "99.99" which is the default value
</script>