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

[Wayne]

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?

[Dimiter Madjarov]

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

[Wayne]

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.