Client-Side Sorting with a View bound directly to the Model

3 posts, 0 answers
  1. Wayne
    Wayne avatar
    24 posts
    Member since:
    Feb 2011

    Posted 10 May 2013 Link to this post

    New to Kendo & MVC, so please bear with me.
    I have a view that contains a grid that is working almost perfectly for me. My model is a System.Data.DataTable which is generated by a service, and is entirely dynamic (in that I don't know the schema until runtime). I'm injecting the model directly into the View, which uses the DataColumn definitions in the DataTable to generate the presentation layer (GridColumnSettings):

    @using System.Data
    @using System.Linq
    @using Kendo.Mvc.UI
     
    @model System.Data.DataTable
     
    @(Html.Kendo()
        .Grid(Model)
        .Name("View")
        .Columns(columns => columns.LoadSettings(
            Model.Columns.Cast<DataColumn>().Select(dc => new GridColumnSettings {
                Member = dc.ColumnName,
                Title = dc.Caption,
                MemberType = dc.DataType,
                Format = "{0:" + dc.ExtendedProperties["format"] + "}",
                Width = "100px"
          })))
        .Sortable()
        .Scrollable()
    )

     

    I'm quite happy with this approach - it's simple and elegant and keeps the Model (arguably ViewModel) and Controller blissfully ignorant of any Kendo/UI concepts. The only problem with this is that sorting always calls back into the Controller, and the DataTable is regenerated, even though it will not have changed.

    I've seen in some Ajax samples the use of a 'serverSorting' property on a 'dataSource' instance, and I think I need to set that to false in order to get what I want, but I can't see how that applies in my MVC scenario. I don't want to set up a DataSource() that makes an Ajax() call that then Read()s the returned Json, because I have all the data already, but I'm struggling to see how else would I get access to the DataSource.ServerSorting property.

    What am I missing?



  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2277 posts

    Posted 13 May 2013 Link to this post

    Hi Wayne,


    To achieve this you should use the approach from the following Demo. The data i.e. the Model is passed to the Grid's constructor and an Ajax Binding with a serverOperation false is specified.
    E.g.
    .DataSource(dataSource => dataSource
       .Ajax()
       .PageSize(20)
       .ServerOperation(false)
    )

    Please let me know if this information was helpful for you.

     

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Wayne
    Wayne avatar
    24 posts
    Member since:
    Feb 2011

    Posted 13 May 2013 Link to this post

    Thanks, that's what I was looking for. I had assumed that the setting of the model in the constructor and the setup of the .DataSource() were mutually exclusive.
Back to Top