Remote Binding of Kendo DropDownlist with MVVM Pattern Using WEB API

MVVM stands for Model< ->View <-> View Model which supports two-way binding between view and view model, where View-Model is responsible for exposing the data objects from the Model in such a way that those objects are easily consumed in the View.

Model: The Model represents a set of classes that describes the business logic and data.

View: The View represents the presentation or the user interface layer.

View Model: The View-Model part of the MVVM is responsible for exposing the data objects from the Model in such a way that those objects are easily consumed in the View.

The View-Model is a representation of your data (the Model) which will be displayed in the View. To declare your View-Model use the kendo.observable function and pass it as a JavaScript object.
ViewModel.Js

(function (G, $, undefined) {

$.extend(true, G, {

KendoDropdown: {

ViewModel: {

DashboardModel: new kendo.observable({

Country: '',

country: G.KendoDropdown.Data.CountryList,

}),

}

}

});

})(window.Gni = window.Gni || {}, jQuery);

2. Data

Create a JavaScript file, in my case I named it Data.Js

This script is responsible to bound the DataSource by requesting the API.
Data.js

(function (G, $, K, undefined) {

$.extend(true, G, {

KendoDropdown: {

Data: {

CountryList: new kendo.data.DataSource({

transport: {

read: {

type: "GET",

url: "api/list/items",

datatype: "json",

},

},

schema: {

model: {

id: "Id",

fields: {

"Text": "Text",

}

}

}

}),

}

}

});

})(window.Gni = window.Gni || {}, jQuery, kendo);

1.3.Core

Create a JavaScript file, in my case I named it Core.Js.

This core script is used to start the rendering of the templates and calls the view model to bind the data in the UI.