Telerik’s Kendo UI Web MVVM Framework Rocks!

For those of us that fell in love with the awesome binding power that WPF and Silverlight brought to the masses with MVVM (Model-ViewModel-Model), well I have good news for you folks. Telerik has their Kendo UI Web MVVM Framework so that you can leverage MVVM in your (MVC) web apps!

Quick synopsis on MVVM for those of us that are new to it (especially MVC devs) and in the interest of time I’ll try to do this in a 60 second nutshell. So when working with a view whether it be in WPF, Silverlight, and now MVC, you can declaritively set which controls bind to which properties to your ViewModel (simply a JSON object with properties). So for example I can set a DropDownList (select) control on my view to bind directly to a property of my ViewModel that is a collection.

So let’s get right to it with a few simple examples.

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Kendo UI Web MVVM</title>
</head>
<body>
</body>
<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>
</html>

Now let’s create a simple form.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Kendo UI Web MVVM</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            font-family: Arial;
        }
        label
        {
            display: block;
            margin-top: 10px;
        }
        #formContainer
        {
            background-color: #F2F7F9;
            width: 400px;
            padding: 20px;
            margin: 50px auto;
            border: 6px solid #8FB5C1;
            border-radius: 15px;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="formContainer">
        <h1>My First MVVM Web View!</h1>
        <form id="myForm" action="">
        <label>
            First Name</label>
        <input type="text" />
        <label>
            Last Name</label>
        <input type="text"  />
        <label>
            Email</label>
        <input type="text"  />
        <label>
            Twitter</label>
        <input type="text"  />
        <label>
            Site</label>
        <input type="text" />
        <label>
            Address</label>
        <input type="text" />
        <label>
            City</label>
        <input type="text" />
        <label>
            State</label>
        <input type="text" />
        <label>
            Zip</label>
        <input type="text" />
        <label>
            Occupation</label>
        <select>
        </select>
        <br />
        <br />
        <input type="button" />
        <input type="button" />
        <input type="button" />
         <input type="button" />
        </form>
    </div>
</body>

</html>

Now let’s create a ViewModel (JavaScript JSON object or class if you will) with some default values for our View (in this case our form) to bind to. We will also add some methods to our ViewModel so that we can bind our buttons that are on our view too.


  <script language="javascript" type="text/javascript">

    var myViewModel;
    $(document).ready(function () {
        myViewModel = kendo.observable({
            firstName: "Long",
            lastName: "Le",
            email: "lelong37@gmail.com",
            twitter: "twitter.com/lelong37",
            site: "blog.longle.net",
            address: "3737 Galatic Avenue",
            city: "Cloud City",
            state: "Texas",
            occupations: ["Please Select", "Hacker", "Jedi", "Ninja"],
            occupation: "Jedi",
        });

        kendo.bind($("#myForm"), myViewModel);
    });

</script>

Note: Line 18 is what will bind our form to our ViewModel, if your wondering why nothing is happening yet it’s because we are missing once more step which is to provide the binding (mapping) information, which will map our controls to our ViewModel. The beauty here is we will do this declaritively with without code.

Our View will have two modes: read-only and edit, so we will bind our controls for where each control will get and set it’s values to and another binding for enabling and disabling them.


    <div id="formContainer">
        <h1>My First MVVM Web View!</h1>
        <form id="myForm" action="">
        <label>
            First Name</label>
        <input type="text" data-bind="value: firstName, disabled:  isDisabled" />
        <label>
            Last Name</label>
        <input type="text" data-bind="value: lastName, disabled:  isDisabled" />
        <label>
            Email</label>
        <input type="text" data-bind="value: email, disabled:  isDisabled" />
        <label>
            Twitter</label>
        <input type="text" data-bind="value: twitter, disabled:  isDisabled" />
        <label>
            Site</label>
        <input type="text" data-bind="value: site, disabled:  isDisabled" />
        <label>
            Address</label>
        <input type="text" data-bind="value: address, disabled:  isDisabled" />
        <label>
            City</label>
        <input type="text" data-bind="value: city, disabled:  isDisabled" />
        <label>
            State</label>
        <input type="text" data-bind="value: state, disabled:  isDisabled" />
        <label>
            Zip</label>
        <input type="text" data-bind="value: zip, disabled:  isDisabled" />
        <label>
            Occupation</label>
        <select data-bind="source: occupations, value: occupation, disabled:  isDisabled">
        </select>
        <br />
        <br />
        <input type="button" value="Load" />
        <input type="button" value="Edit" />
        <input type="button" value="Cancel" />
         <input type="button" value="Reset" />
        </form>
    </div>

Now if we refresh the page we that our View is not bound to our ViewModel…!

Note: Notice that our form is in read-only mode, all of our controls are disabled for editing because the disabled attribute is bound to the isDisabled property in our ViewModel whose default value is set to true.

For those of us that are ASP.NET MVC developers, the answer is yes you can get and post your ViewModel back as JSON using jQuery from and to an actions on your controller!

Now let’s demonstrate binding our buttons to methods on our ViewModel, first let’s add a couple of methods to our ViewModel (edit, cancel, reset, and load)

  • edit, will enabled our View for editing
  • cancel, will set our View back to read-only mode
  • reset, will clear out our View
  • load, will load John Doe’s information into our View (obviously here you could load this from using a “GET” to an action off of your controller)

    var myViewModel;
    $(document).ready(function () {
        myViewModel = kendo.observable({
            firstName: "Long",
            lastName: "Le",
            email: "lelong37@gmail.com",
            twitter: "twitter.com/lelong37",
            site: "blog.longle.net",
            address: "3737 Galatic Avenue",
            city: "Cloud City",
            state: "Texas",
            occupations: ["Please Select", "Hacker", "Jedi", "Ninja"],
            occupation: "Jedi",
            isSaved: false,
            isDisabled: true,
            edit: function (e) {
                this.set("isDisabled", false);
            },
            cancel: function (e) {
                this.set("isDisabled", true);
            },
            reset: function (e) {
                this.set("firstName", null);
                this.set("lastName", null);
                this.set("email", null);
                this.set("twitter", null);
                this.set("site", null);
                this.set("address", null);
                this.set("city", null);
                this.set("state", null);
                this.set("zip", null);
                this.set("occupation", "Please Select");
            },
            load: function (e) {
                LoadJohnDoesInfo();
            }
        });

        kendo.bind($("#myForm"), myViewModel);
    });

    function LoadJohnDoesInfo() {
        myViewModel.set("firstName", "John");
        myViewModel.set("lastName", "Doe");
        myViewModel.set("email", "jdoe@skyranch.com");
        myViewModel.set("twitter", "twitter.com/jedi");
        myViewModel.set("site", "starwars.com");
        myViewModel.set("address",  "1212 SkyRanch");
        myViewModel.set("state", "California");
        myViewModel.set("zip", "98000");
        myViewModel.set("occupation", "Jedi");
    }

Add our binding meta-data to our buttons declaritively.


        <input type="button" value="Load" data-bind="click: load" />
        <input type="button" value="Edit" data-bind="click: edit" />
        <input type="button" value="Cancel" data-bind="click: cancel" />
        <input type="button" value="Reset" data-bind="click: reset" />


So let’s invoke some our methods on our ViewModel and give our button’s a run for their money.

Now let’s click on the [Load] button and here I just wanted to demonstrating that all we need to do here to update the View is interact with the ViewModel, any changes to the ViewModel and the View automatically updates because they are bound together, which is the magic and essense of the MVVM pattern!

Our load method on our ViewModel.


            load: function (e) {
                LoadJohnDoesInfo();
            }

Which turns around and invokes our LoadJohnDoesInfo method and set’s his data on our ViewModel.


    function LoadJohnDoesInfo() {
        myViewModel.set("firstName", "John");
        myViewModel.set("lastName", "Doe");
        myViewModel.set("email", "jdoe@skyranch.com");
        myViewModel.set("twitter", "twitter.com/jedi");
        myViewModel.set("site", "starwars.com");
        myViewModel.set("address", "1212 SkyRanch");
        myViewModel.set("state", "California");
        myViewModel.set("zip", "98000");
        myViewModel.set("occupation", "Jedi");
    }

Notice when the View first loads our entire form is disabled for our read-only mode and when we click [Edit] all of our controls that had the binding for disabled that was bound to the isDisabled property on our ViewModel which be default is set to true. Once we click on the Edit button the isDisabled property is set to true enabling all of our controls for edit mode.

Our declaritive binding on one of our controls.


<input type="text" data-bind="value: firstName, disabled:  isDisabled" />

The Edit method that is invoked when clicking the [Edit] button.


            edit: function (e) {
                this.set("isDisabled", false);
            },

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 automagically updated because it is bound to our ViewModel.


            reset: function (e) {
                this.set("firstName", null);
                this.set("lastName", null);
                this.set("email", null);
                this.set("twitter", null);
                this.set("site", null);
                this.set("address", null);
                this.set("city", null);
                this.set("state", null);
                this.set("zip", null);
                this.set("occupation", "Please Select");
            },

Well great, I know we aren’t doing anything ground breaking here, however this post is really just to illustrate MVVM on the client-side using Telerik’s Kendo UI Web MVVM Framework and ellaborate on how we can really just work with the ViewModel to update the View vice- versa any updates to the View will update our ViewModel because they are “bound” together using MVVM.

Last but not least, even though the Kendo UI Framework was written with jQuery, notice how we didn’t have to explicitly use any jQuery or Javascript to set or get any values from our controls. I’m not at all saying jQuery is a bad thing, however when developing you probably want to be coding something that is immediately adding business value rather than coding jQuery selectors to get and and set values in your View right..? :p

Happy coding…! :)

Download sample code: https://skydrive.live.com/redir?resid=949A1C97C2A17906!1951

About these ads

13 thoughts on “Telerik’s Kendo UI Web MVVM Framework Rocks!

  1. What is the advantage of Kendo MVVM over knockoutjs? Or why didnt Telerik just base their tools around an existing ecosystem like knockoutjs or angular instead of reinventing the wheel…

    • Kendo does not want to be coupled or have dependencies to other frameworks, partly due to their aggressive release cycle and there ability to integrate or live side by side with most frameworks. Both are MVVM frameworks are great, one could argue one is better than the other, however if you are using Kendo UI, you could get away with most of what KnockoutJS brings in terms of MVVM with one framework, Kendo UI.

  2. Very nice work. I appreciate your time that you have invested to help out. How about tying up the Model with the View Model now; since you have showed us how to tie up the View and the View Model, how about the rest of it?

    • Thanks for the positive feedback, great request, I’ve actually started already on this tying up the rest ,this should be completed pretty soon. To get updates, you can follow me on Twitter (http://twitter.com/lelong37), this is where I publish my posts.

  3. Pingback: Using Kendo UI and MVVM « .Net'ers

    • Hi raajsaran,

      You can just pass your client side model directly to a MVC Web API and the model binding will automatically be handled for you. Just make sure your model in the server side matches up with the model from your client side. In the client side function you can just use an ajax post via jQuery.

  4. Great example. Been looking for a simple example. I have one question.

    How can I populate the form with a remote data source.

    I basically want a clients detail records page with a form that’s populated based on the client I’d in the query string.

  5. Pingback: Telerik’s HTML5 Kendo UI Web Validator Framework « Long Le's Blog

Please Leave a Reply or Tweet me @LeLong37...!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s