Kendo UI: Using MVVM

What is MVVM?

Model View ViewModel (MVVM) is a design pattern which helps developers to separate the Model (the data) from the View (the UI). The ViewModel part of MVVM is responsible for exposing the data objects from the Model in such a way that those objects are easily consumed in the View.

MVVM Using Kendo

So let’s get right to it with a few simple examples to see how we can use MVVM pattern of Kendo.

First add a script references for jQuery and Kendo UI, here are some links for Microsoft’s and Telerik CDN’s for these scripts.

<!DOCTYPE html>
<html>
<head>
    <title>Kendo UI Web MVVM</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js">  
    </script>
    <script src="http://cdn.kendostatic.com/2012.2.710/js/
kendo.all.min.js"> </script>
</head>
<body></body>
</html>

Let’s create a simple form which will have some input text and button. And we will provide the binding (mapping) information, which will map our controls to our ViewModel. The beauty here is we will do this declaratively with without code

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
   <script src="http://cdn.kendostatic.com/2012.2.710/js/ kendo.all.min.js"></script>
</head>
<body>
<div id="formContainer">
    <h1>Kendo MVVM Web View!</h1>
    <form id="myForm" action="">
      <label>First Name</label>
      <input type="text" data-bind="value: firstName" />
      <label>Last Name</label>
      <input type="text" data-bind="value: lastName" />
      <label>Email</label>
      <input type="text" data-bind="value: email"/>
      <label>Address</label>
      <input type="text" data-bind="value: address" />
      <label>City</label>
      <input type="text" data-bind="value: city" />
      <label>State</label>
      <input type="text" data-bind="value: state" />
      <label>Zip</label>
      <input type="text" data-bind="value: zip" />
      <label>Country</label>
      <input type="text" data-bind="value: country" />
      <label>Occupation</label>
      <select data-bind="source: occupations, value: occupation"></select>
       <input type="button" value="Reset"/>
    </form>
</div>
</body>
</html>

Now let’s create a View Model (JavaScript JSON object or class if you will) with some default values for our View (in this case our form) to bind to.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var myViewModel = kendo.observable({
            firstName: "Nirbhay",
            lastName: "Anand",
            email: "nirbhay.anand@xyz.com",
            address: "xyz",
            city: "Pune",
            state: "Maharashtra",
            country: "India",
            zip:"411018",  
            occupations: ["Please Select", "Devloper", "QA", "Architect"],
            occupation: "Devloper"
        });

        kendo.bind($("#formContainer"), myViewModel);
    });
</script>

We will also add some methods to our View Model so that we can bind our button that are on our view too. Now let’s demonstrate binding our buttons to methods on our ViewModel, will demonstrate the reset button.

    • reset, will clear out our View

 

Here we have added data-bind attribute to Reset button.

<input type="button" value="Reset" data-bind="click: reset" />

And now we will update our ViewModel to add the reset function and its implementation

<script type="text/javascript" language="javascript">// <![CDATA[
$(document).ready(function () {

var myViewModel = kendo.observable({

firstName: "Nirbhay",

lastName: "Anand",

email: "nirbhay.anand@xyz.com",

address: "test",

city: "Pune",

state: "Maharashtra",

country: "India",

zip:"411018",

occupations: ["Please Select", "Devloper", "QA", "Architect"],

occupation: "Devloper",

reset: function (e) {

this.set("firstName", null);

this.set("lastName", null);

this.set("email", null);

this.set("address", null);

this.set("city", null);

this.set("state", null);

this.set("country", null);

this.set("zip", null);

this.set("occupation", "Please Select");

}

});

kendo.bind($("#formContainer"), myViewModel);

});

Hitting the [Reset] button will simply invoke the reset method on our ViewModel which clears out all our properties by setting them null values and again our View is automatically updated because it is bound to our View Model.

Summary

Here we saw how easily we can implement the MVVM framework using KendoUI with minimal amount of coding. Here to explain MVVM I have used textbox and list. There are other controls provided by kendo which can be bounded using View Model. For reference you can visit

http://demos.kendoui.com/web/mvvm/index.html

Published by Nirbhay

Technology Geek,Blogger,Reviewer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: