Remote Binding of Kendo DropDownlist with MVVM Pattern Using WEB API

MVVM

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.

Let us start with creating an ASP.NET WEB API

Creating an Empty ASP.NET WEB API Project:

Create a simple empty WEB API project as in the following figures:

Figure 1

Figure 2

Creating a Model Class:

Right click on the model folder add a new class, in my case I named it CommonList.cs:

Code in CommonList.cs

public class CommonList
{
public CommonList(int Id, string Text)
{
this.Id = Id;
this.Text = Text;
}
public int Id { get; set; }
public string Text { get; set; }
}

Creating a Controller:

Right click on the Controller folder and add a new controller, in my case I named it ListsitemsController.cs:

Code in ListsitemsController.cs

public class ListsitemsController : ApiController
{
[HttpGet]
[Route("items")]
public HttpResponseMessage ListItems()
{
List<CommonList> _list = new List<CommonList>();
_list.Add(new CommonList(1, "India"));
_list.Add(new CommonList(2, "China"));
_list.Add(new CommonList(3, "United States"));
return Request.CreateResponse(HttpStatusCode.OK, _list, Configuration.Formatters.JsonFormatter);
}
}

The above controller will return a Country list as a response.

Now the API is ready to consume.

Using a Kendo Dropdownlist with MVVM pattern

Creating a HTML page

Create a new HTML page in the project, in my case I named it kendoDropdownlist.html.

Design:

<!DOCTYPE html>
<html>
<head>
<title>Kendo Dropdownlist MVVM</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/js/kendo.all.min.js"></script>
<script src="scripts/Core.js"></script>
<script src="scripts/Data.js"></script>
<script src="scripts/ViewModel.js"></script>
</head>
<body>
<div class="col-lg-12">
<div id="Main" class="main"></div>
</div>
<script type="text/x-kendo-template" id="Layout-temp">
<div class="col-lg-12">
<div id="content"></div>
</div>
</script>
<script type="text/x-kendo-template" id="Dashboard-temp">
<div class="row">
<h4>Kendo DropDownlist with MVVM Pattern</h4> <input data-role="dropdownlist" data-bind="source:country,value:Country" data-text-field="Text" data-value-field="Id" data-option-label="--Select Country--" style="width:5remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using%" /> </div>
</script>
</body>
</html>

Creating a JavaScript files

1. View Model

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

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.

$(function () {
var Layout = new kendo.Layout("Layout-temp");
var DashboardView = new kendo.View("Dashboard-temp", { model: Gni.KendoDropdown.ViewModel.DashboardModel });
var router = new kendo.Router({
init: function () {
Layout.render("#Main");
Layout.showIn("#content", DashboardView);
}
});
router.start();
});

The Result in Browser:

I hope you enjoyed this article. Your valuable feedback, question, or comments about this article are always welcome.