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 no

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.

Answer 2

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

Answer 3

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