Working with Kendo Data Model

Kendo.data.model provides the ability to define schema. Inside schema fields with various attributes and methods can be defined. It is inherited from ObservableObject

Read more about it here

You can create Kendo UI Model as following,

image

Even though at first glance above syntax looks verbose but it is very straight forward. You can create a new model by creating a variable of type kendo.data.model

  • First we define identifier of the model. This can be any field of the model. It is defined by setting id attribute
  • Different fields of model can be created in field attribute

For example, if you want to create a model for Student, you can do that as following

image

In Student model

  • There are three fields name , rollnumber and marks
  • Rollnumber is set as identifier field of this model.
  • Type of the fields is set in the type attribute.

You can create object of a model as below.

image

You can controls fields behavior and can configure many details like following

  • Default value can be set
  • Editable behavior can be set
  • Null behavior can be set
  • Default parsing function for a field can be set.
  • Validation rules can be set

You can configure various attributes as following

image

Name filed in the model is created with different attributes. For example this name field is editable and its default value is dj.

You can determine that whether a model is new or not using isNew method. Consider below instance of Student model, you will get false as output. If model identifier is set then Kendo framework does not consider that as new

image

If you change above model as following, you will get true in alert since id of model is not set.

image

In this way you can work with Kendo.data.model. I hope you find this post useful. Thanks for reading.

 

Working with Kendo Data ObservableArray

Kendo.data.ObservableArray can be defined as below equation. It is a simple array with capability to track the changes.

image

Read more here

Kendo UI Observable String Array can be created as following

image

Array can be traversed in usual way as following. length filed returns number of elements in the array .

image

On any change in the observableArray change events gets fired. You can bind change event to array as following.

image

You can track finer level details of change as well. You can get following change information as shown in diagram

image

For example, let is push “John “in above array. We can do that as following

image

After that in change event you can get information like Add and John as following

image

Using Join method you can join all items of array into a string. For example, if you want to have a separator $ between all names, you can do that by calling simple join method on array as following

image

Join method takes a string input parameter.

An item can be inserted into array using the push method and can be removed using pop method. More than one item can be inserted as following

image

And item can be removed as following

image

So far we have worked with primitive type string observablearray. We can have complex type observablearray as well. We can create and traverse that as following.

image

We can insert an item in above created complex type observablearray as following

image

We can convert an array to JSON as following

image

You should get the output as following

image

In this way you can work with Kendo Data ObservableArray. I hope you find this post useful. Thanks for reading.