MVC Server Wrapper Questions

[Loren]

I have some questions regarding the MVC Server wrappers.

1. Is there any true benefit for the MVC Server wrappers other than time saved form manually coding the JS? Like are there some special tricks or handlers that are only available via the server wrappers?

2. Is there anyway to specify the dataType for the Wrapper DataSource builder? Example if im using WebApi to serve some data if i use the grid and use the Ajax or WebApi Datasource builder i get nothing but using that same WebApi endpoint if i use the client-side initializing it works. Sample code at the end.

3. What are the pros and cons for the server side functions like Paging, sorting etc..

***************** CODE for # 2 ************************

@model Tsms.Az.Dds.Dto.ViewModels.Classroom.AvailableViewModel

@{
    ViewBag.Title = "WebApi";
}

<h2>WebApi</h2>

<h3>MVC Wrappers</h3>
<div>
    @(Html.Kendo()
        .Grid<Tsms.Az.Dds.Dto.ViewModels.Classroom.AvailableGridItem>()
        .Name("AvailableClassesGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ClassDateColumn).Title("Date").Width(150)
                .ClientTemplate(
                    "<span class='ac#= ClassroomType#-#: LanguageType# ;'>#= ClassDateColumn#</span>" +
                    "<br/><br/>" +
                    "# if ( window.location.pathname.indexOf('/Register/Classroom') == 0 ) { #" +
                        "<a data-tsms='acAction' class='button red'><i class='icon-ok'></i> Select</a>" +
                    "# } else { #" +
                        "<a href='Register/Classroom?classID=#=ClassroomID#' data-tsms='acAction' class='button red'>Register</a>" +
                    "# } #"
                );
            columns.Bound(c => c.ClassLocationColumn).Title("Address").Encoded(false).ClientTemplate("<span class='ac#= ClassroomType#-#: LanguageType# ;'>#= ClassLocationColumn#</span>");
            columns.Bound(c => c.ClassDirectionsColumn).Title("Directions").Width(250).Encoded(false).ClientTemplate("<span class='ac#= ClassroomType#-#: LanguageType# ;'>#= ClassDirectionsColumn#</span>");
            columns.Bound(c => c.DisplayCity).Visible(false);
            columns.Bound(c => c.ClassTimeColumn).Visible(false);
        })
        .Pageable(p => p.Enabled(Model.GridSettings.PageableSettings.Enabled).PageSizes(Model.GridSettings.PageableSettings.Enabled))
        .Sortable(s => s.Enabled(Model.GridSettings.SortableSettings.Enabled))
        .Scrollable(s => s.Enabled(Model.GridSettings.ScrollableSettings.Enabled))
        .Selectable(s => s.Enabled(Model.GridSettings.SelectableSettings.Enabled))
        .Filterable(f => f.Enabled(Model.GridSettings.FilterableSettings.Enabled))
        .DataSource(source => source
            .Ajax()
            .ServerOperation(false)
            .Read(read => read.Url("/api/classroom/get-available-grid-list-test").Type(HttpVerbs.Get))
        )
        .Deferred()
    )
</div>

<hr />
<h3>Client Side</h3>
<div id="grid"></div>

@section scripts
{
<script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "/api/classroom/get-available-grid-list-test"
                            },
                            pageSize: 5,
                            serverPaging: false,
                            serverFiltering: false,
                            serverSorting: false
                        },
                        height: 430,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                                field: "ClassDateColumn",
                                filterable: false
                            },
                            "ClassLocationColumn"
                        ]
                    });
                });
</script>
}

[Vladimir Iliev]

Hi Loren,

Please check the answers of your questions below:

1) Basically the MVC wrappers are superset of the KendoUI widgets and it will save you a lot of work. Most important the wrappers contains build in functionality for parsing and serializing the data that comes from the MVC Controller.  Other benefits are the strongly typed coding, fluent API for building the widgets and automatic model generation, model validation using data annotation attributes and etc.. More information can be found in our documentation. 

2) I'm not sure that I understand correctly this question, however if you need to specify all possible options of the DataSource you can use the "Custom" DataSource builder. In all other DataSource builders that option is not available as it's pre-defined. You can try enable CRUD operations on both Grids and see how much additional coding would be needed in order to support it in KendoUI grid. 

3) Server side paging, sorting, filtering etc. can be benefit in cases where the client browsers / PC configurations have low performance and rendering large data sets can result in very slow operation. 

Regards,
Vladimir Iliev
Telerik