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.

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.