Trouble with client side paging

[Coy]

I've got an MVC implementation of a grid, datasource settings below

 

            .DataSource(datasource => datasource
                .Ajax()
                .PageSize(20)
                .ServerOperation(false)
                .Read(read => read.Action("Data_Read", "StaffManager")
                    .Data("pageData")
                )

I have ServerOperation(false) to allow for some client side sorting, which works great!  Now I'm trying to get client side paging working but I cannot.

My page event handler is here:

    function onGridPage(args) {
        pageNumber = args.page;
        var grid = $('#grid').data('kendoGrid');    
        
        grid.dataSource.read();
        grid.dataSource.sync();
        grid.refresh();
    }

When I click page, I get back a valid json result from my read method (expecting 1 item) but the grid doesn't display anything.  The page numbers and totals are updated correctly, just no data is shown.  In dev tools, I see the json object that has data.

I assume that the datasource isn't being updated after the read.

 

Any suggestions?

[Coy]

Got it figured out.

Needed to replace the data in the databound event like this:

grid.one("dataBound", function () {
                    this.dataSource.data(data);
                });