Kendo UI Grid data is always empty at client-side, when binding it from server side

Question

I am binding Kendo Grid from ASP.NET MVC as follows:

        @(Html.Kendo().Grid<My.Web.Models.Generated.CustomerSearch01.CityInfo>()
                    .Name("gridCities")
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.Text).Width(140).Title("City");
                    })
                    .Scrollable()
                    .Selectable(selectable => selectable.Type(GridSelectionType.Row))
                    .BindTo(Model.CitiesList)
                    .DataSource(ds => ds.Server().Model(m => m.Id(p => p.Value)))
        )

That works fine and the grid shows up on the page with data and I have no problems with above. However, using browser developer tools, if I try to get the data of the above grid using the following statement, it returns empty:

jQuery("#gridCities").data("kendoGrid").dataSource.data()

What am I missing?

Thanks in advance

Solution (based the answer):

replace the following:

.DataSource(ds => ds.Server().Model(m => m.Id(p => p.Value)))

with

.DataSource(ds => ds.Ajax().ServerOperation(false).Model(m => m.Id(p => p.Value)))

Petur Subev Petur Subev · Accepted Answer · 2015-02-27T08:31:19

You Grid is configured to use ServerBinding which means the TR / TD elements are rendered from the server. If you want to have the JavaScript objects of your model on the client side and do not perform separate Ajax request configure your DataSource to be

ds.Ajax().ServerOperations(false)

This will not perform any Ajax requests, data will be serialized from the server int JSON.

Kendo UI Grid data is always empty at client-side, when binding it from server side

1 Answers