MVC Server Wrapper Questions

2 posts, 0 answers
  1. Loren
    Loren avatar
    9 posts
    Member since:
    Dec 2013

    Posted 12 May 2014 Link to this post

    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>
    }
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 14 May 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top