This is a migrated thread and some comments may be shown as answers.

MVC Server Wrapper Questions

1 Answer 44 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Loren
Top achievements
Rank 1
Loren asked on 12 May 2014, 09:47 PM
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>
}

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 14 May 2014, 04:36 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
General Discussions
Asked by
Loren
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or