Kendo UI For ASP.NET MVC Beta Released

Thursday, May 31, 2012 by Kendo UI Team Blog | Comments 9

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.

Simple AutoComplete Example

<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.

Simple AutoComplete With Using MVC Wrappers

@(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.

AutoComplete With Remote Data

<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.

AutoComplete With Remote Data Using 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:

Only ASP.NET MVC version 3+ is supported. We will not be adding support for ASP.NET MVC v1 or v2
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.
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.
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.

About the Author
Burke Holland is a web developer living in Nashville, TN. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API's. Burke works for Telerik as a Developer Evangelist focusing on Kendo UI. Burke is @burkeholland on Twitter.

9 Comments

1 Vesselin Obreshkov 31 May 2012
Are the sources for the Extensions themselves going to be released as well (Kendo.Web.Mvc.dll)? Would like to see how you do handle your Filters and Sorts as we're implementing our own (that work with well with the current Web release after some simple parameterMap mappings) but making everything even more seamless and auto-magical won't hurt.
2 Rad 01 Jun 2012
+10 for KendoUI wrappers
+10 for Kendo UI Mobile wrappers - this is where smart mobile applications need server side support.
If you deliver web pages to the mobile client you will certainly want to refresh data or provide hybrid view of data (when connected - especially via Wi-Fi you will want a direct access to the server).
I will be doing some prototyping now that MVC KendoUI wrappers are available and try to use them in Mobile web applications until you come up with Mobile version.
Rad
3 Todd 01 Jun 2012
@Vesselin- The MVC wrappers will not be open source, but the source will be available to commercial customers.

@Rad- Thanks for the feedback. With Kendo UI Mobile and its advanced Application framework, we think it's more common to rely on the server only for feeding and persisting data. That's why we've not created mobile wrappers in this release. We'll be listening closely, though, to feedback like this to determine if mobile wrappers are needed in the future!
4 Daniel 01 Jun 2012
Hi!
When will be ready the final version?
Will kendo ui for MVC examples available on the website?
Will support the grid the pop-up edition? I didn't see in the example.
PD: Sorry for my english.
Daniel.
5 Vesselin Obreshkov 03 Jun 2012
@Todd, I own ultimate collection and have an extra complementary kendo license that I got during one of your recent webinars. The reason I'm asking for the sources is I want to see how you implement your Filters and Sorts in your code and map then to/from the client. We want to make sure our API is as compatible and seamless with the Kendo DataSource as possible (requiring minimal parameter mappings and things like that). Are you planning on making the sources available at launch date or can we peek beforehand (early adopters, suicidal and all that ;)
6 thanks-in-advance 03 Jun 2012
I really hope you will spend some time to make these accessible. For a great example of how this can be done see the following:
http://hanshillen.github.com/jqtest/#goto_slider

as they are now they seem almost completely unaccessible via keyboard or screen reader and could not be used on almost any government web site or any web site in the EU.
7 Todd 04 Jun 2012
@Daniel- The final version will be ready with our Q2 release in July (2nd week).

@Vesselin- I understand. Not sure we'll be able to update the source package downloads before the official release, but I'll check with engineering. If you have a specific question, we should be able to help in the forums in the meantime.

@Thanks- Accessibility is important to Kendo UI. You should find that a number of the Web UI widgets today support things like keyboard nav, but we'll be making a HUGE push to adopt more accessibility support in our Q3 release.

Hope this helps!
8 Pritesh 20 Jul 2012
@Daniel- The final version will be ready with our Q2 release in July (2nd week).

@Vesselin- I understand. Not sure we'll be able to update the source package downloads before the official release, but I'll check with engineering. If you have a specific question, we should be able to help in the forums in the meantime.

@Thanks- Accessibility is important to Kendo UI. You should find that a number of the Web UI widgets today support things like keyboard nav, but we'll be making a HUGE push to adopt more accessibility support in our Q3 release.
9 pure htp 02 Feb 2013
Hi! I understand this is kind of off-topic but I had to ask. Does building a well-established website like yours require a massive amount work? I am completely new to running a blog but I do write in my journal daily. I'd like to start a blog so I can easily share my personal experience and feelings online. Please let me know if you have any kind of suggestions or tips for brand new aspiring blog owners. Appreciate it!

Comment

Your name Click to add
Email (optional) Click to add
Website (optional) Click to add

Comment

.NET Developer Tools DevTools

Hybrid Mobile Development Icenium

HTML5 / JavaScript Development Kendo UI

Testing Tools TestStudio

Web Presence Platform Sitefinity CMS

Agile Project Management TeamPulse

Contact us

About Telerik

Blogs