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 to true 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>
In this article