Working with Kendo Data Model

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Follow @debug_mode

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,

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

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.

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

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

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

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

Follow @debug_mode

Working with Kendo Data ObservableArray

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Follow @debug_mode

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

Kendo UI Observable String Array can be created as following

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

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

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

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

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

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

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

And item can be removed as following

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.

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

We can convert an array to JSON as following

You should get the output as following

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

Follow @debug_mode