Difference between Kendo UI Web and Kendo UI ASP.NET for MVC

Question

When creating an MVC project via Visual Studio, Views are created with ".cshtml" files.

The KendoUI Server Wrappers have a model in the View whereas the KendoUI Web not only doesn't have any model, but there is no ".cshtml" files; only HTML. The HTML seems to just point to a datasource for data retrieival/updates whereas the KendoUI Server Wrappers need a model to pass to a controller for the same type of operations.

What is the difference between the two? I just don't understand the KendoUI Web concept and how that works. What about adaptive rendering where you create multiple copies of your ".cshtml" files for rendering on a specific device. How is that achieved with the KendoUI Web?

It also appears that you can use jQuery using the selectors for the KendoUI Web toolset (whose name wouldn't change) as opposed to the KendoUI Server Wrappers. You just don't know what the jQuery selectors are with the KendoUI Server Wrappers.

I find it very difficult to program against the KendoUI Server Wrappers (even though they are supposed to be easier and faster to implement) because of the different events you would need for a particular extension to handle and not knowing what the selector names are. This does not appear to be the case for the KendoUI Web toolset.

Keyte

Answer 1

Simply put, Kendo UI Web is open for any framework that can support javascript/jQuery but Kendo UI Server Wrappers/Kendo UI ASP.NET for MVC is for ASP.NET MVC projects only.

Working with Kendo UI Web will need lot of extra coding and handling, while the MVC version is more developer-friendly and easier to maintain. If you are working on ASP.NET MVC projects then you can make your coding easy with the server wrappers.

Kendo UI web is free to use, whereas the Server wrapper (Kendo UI for ASP.NET MVC) needs paid license per developer.

A simple example of the code differences for a kendo grid is as below:

with Server wrappers

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>

@(Html.Kendo().Grid(Model)    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductID).Groupable(false);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice);
        columns.Bound(p => p.UnitsInStock);
    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Products_Read", "Grid"))
    )
)

with Kendo UI Web

<script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
            dataSource: {
                data: createRandomData(50),
                pageSize: 10
            },
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true
            },
            columns: [ {
                field: "FirstName",
                width: 90,
                title: "First Name"
            } , {
                field: "LastName",
                width: 90,
                title: "Last Name"
            } , {
                width: 100,
                field: "City"
            } , {
                field: "Title"
            } , {
                field: "BirthDate",
                title: "Birth Date",
                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
            } , {
                width: 50,
                field: "Age"
            } ]
        });
    });
</script>

You can check the rendered grid here.

More details about server wrappers and Kendo UI Web.

Rafflesia

I've already done a production project with the server wrappers. However, what I find difficult is when you need to process events with the server wrappers (like OnItemDataBound for a grid to check each record and do something with it, etc). All the examples are with the KendoUI Web. In addition, I don't know how to do anything with the mvc wrapper objects using jquery because I have no idea what the selector names are. With the KendoUI web, you actually give the extensions a name and know what it is. Any advice on how I can know the selectors for the extensions using the server wrappers? – Keyte

demos.kendoui.com/web/grid/events.html docs.kendoui.com/api/web/grid#events Its easy to help you if you have a specific question – Rafflesia

Answer 2

Well, HaBo said it all, basically. The server wrappers are great for those who (like myself) like to be "lazy" when coding. I prefer the fluent like way of doing things with the wrappers as opposed to the pure javascript way.

That said, you should bare in mind that the KendoUI MVC Wrappers are no silver bullet. If you do not know your way around javascript, you might find yourself short on what one can do with the KendoUI framework.

For me, I've been finding a balance between using the wrappers and javascript also (using the "events", for instance) to do more "advanced" stuff. :)

Watery

Answer 3

I know this is a rather old question but I think my answer will add value (as it contains updated information).

There is this page in Telerik's documentation that explains comparison between Kendo-UI and its server-side wrappers (especially the ASP.NET MVC wrappers) quite well.

Also, regarding selectors name, actually the wrappers require you to specify a name (which will be rendered as the id attribute of the element). Telerik's documentation and forum also have some CSS selectors necessary for you to play around with the CSS where necessary. You just need to Google it hard enough. For example here is the page where you can find the CSS selector to modify the behaviour of Kendo Grid's headers.

Hope it helps

Lunge

First link is not there anymore. – Quidnunc