Kendo UI For ASP.NET MVC Beta Released

Since the initial launch of Kendo UI, we received many questions about using Kendo UI with various server platforms. While Kendo UI is a JavaScript framework that works with any server-side technology, some developers prefer to configure and initialize UI widgets from the comfort of their own server-side language. We get it.

A server-side abstraction for Kendo UI allows developers to take full advantage of server-side framework features and coding conveniences. There is a feeling of congruence when you are able to build your UI using the same syntax that you are using in your server layer. Also, some developers are less comfortable in JavaScript and CSS, but feel very capable when working inside of a statically-typed language.

We’ve digested this feedback and we are ready reveal our progress.

Today we are pleased to announce our first step in delivering server-side wrappers for Kendo UI with the beta release of Kendo UI for ASP.NET MVC!

This marks the first server-side wrappers release for Kendo UI, but certainly not the last. While we’re big fans of ASP.NET MVC, we also love other server frameworks like Java, PHP, NodeJS and Rails. Demand for ASP.NET MVC server wrappers pushed them to the top, but we’ll continue to deliver server wrappers for other platforms as we move forward.

For now, let’s take a quick look at today’s new beta bits.

What’s In An Extension

If you are familiar with the Telerik Extensions for ASP.NET MVC, I highly recommend you read this article for more details about how today’s release relates to those tools, and the few changes that will accompany that move. While Kendo UI for ASP.NET MVC is similar in many ways to the Extensions, it is not identical.

For everyone else coming fresh, let’s take a quick look at how these server wrappers provide a new development experience for ASP.NET MVC developers working with Kendo UI Web and DataViz (there are no Mobile server wrappers in v1).

For starters, let’s look at a simple example. Normally, when working with a Kendo UI AutoComplete widget, you might create an HTML element, select that element with jQuery and call the kendoAutoComplete function on it.

<input id="autoComplete" />

<script> 

$(function() {

    var items = [ "Item1", "Item2", "Item3" ]

    $("#autoComplete").kendoAutoComplete({
        data: items
     });

});
</script>

Using the new ASP.NET MVC server wrappers, we can do all of this using the Razor syntax.

@(Html.Kendo().AutoComplete()
    .Name("autocomplete")
    .BindTo(new string[] { "Item1", "Item2", "Item3" })
)

Both of these will generate the exact same widget on the page. However, the MVC wrappers allow you to work with Kendo UI using server syntax which gives you the added benefit of Visual Studio IntelliSense. The wrappers also create and initialize the HTML element for you at runtime so you don’t have to do that by hand.

Additionally, notice that the ASP.NET MVC API is fluent. This means you can chain methods together, similar to jQuery, allowing for a simple inline configuration.

You can also extract from my simple example that the new wrappers make it easier to bind Kendo UI widgets to server-side data. The ASP.NET MVC example binds to a server-side array of strings using the BindTo statement, while the JavaScript example binds to a JavaScript array via the data attribute. Kendo UI for ASP.NET MVC is automatically handling the JavaScript for you so you can worry less about things like client-side binding.

Lets have a look at a slightly more complex example using remote data and the Kendo UI DataSource.

First lets examine the way this might be done using JavaScript alone.

<input id="autoComplete" />

<script> 

$(function() {

    $("#autoComplete").kendoAutoComplete({
        dataSource: {
            transport: {
                read: {
                    url: "ControllerName/MethodName"
                }
            },
            serverFiltering: true
        },
        separator: ", "
        dataTextField: "ProductName"
     });

});

</script>

Now lets create the exact same widget and configuration using Razor and the ASP.NET MVC Server wrappers.

@(Html.Kendo().AutoComplete()
      .Name("autocomplete")
      .Separator(", ")
      .DataTextField("ProductName")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("ControllerName", "MethodName");
          })
          .ServerFiltering();
      })
)

You can see that the wrapper syntax is beautifully constructed and very concise. The AutoComplete is configured by calling methods using the fluent API. The DataSource is configured much in the same way, with simple hooks for binding your UI widget to data served-up by a MVC controller.

Wrappers Rundown

Today’s beta release includes support for many of the Kendo UI Web and DataViz widgets. To make sure that we have included all that you need to get rolling with these server side wrappers, we built a comprehensive set of demos that should show you how to do just about everything. Included with each demonstration is the source code and the documentation for the server wrappers.  The Beta installs with a .msi package which will install the demos for you.

Of course, today’s release is beta. We want your feedback. Let us know via the Kendo UI forums what you think about the new ASP.NET MVC wrappers and help us make the official release in July top-notch!

What About [Insert Server Here] Wrappers?

We have plans to build wrappers around Kendo UI for multiple platforms, including Java and PHP. We had to pick a starting point and decided to start with the ASP.NET MVC wrappers based on strong customer demand. Look for support for other technologies to come in the near future.

Important Closing Notes

There are some important details to note about the new MVC wrappers:

1. Only ASP.NET MVC version 3+ is supported. We will not be adding support for ASP.NET MVC v1 or v2
2. There are no wrappers for the Kendo UI Mobile widgets yet. Since Kendo UI Mobile is often packaged for offline use (no server available), there is less need for server-side wrappers. If you’d like server wrappers for Kendo UI Mobile, let us know! We need to hear your feedback.
3. Kendo UI for ASP.NET MVC, like Kendo UI DataViz and Mobile, is a commercial tool for professional developers. For now, it is not available under an open source license.
4. Kendo UI for ASP.NET MVC will be replacing the Telerik Extensions for ASP.NET MVC. If you’d like more details on this transition, please check-out this post on the Telerik.com blogs.

That’s it. Hop on over and download the Kendo UI for ASP.NET MVC Beta release. Let us know what you think. We think that if you are an ASP.NET MVC Developer, you are really going to love working with the new Kendo UI for ASP.NET MVC wrappers.