Paging kendo grid client side

Question

I want to use a MVC helper to build a grid on the server side but after I want to add and remove rows on the client side.

So I use the following wrapper:

@(Html.Kendo().Grid<SIGEPos.Models.MyGridViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.id).Hidden();
        columns.Bound(p => p.name).Title("Name").Width(130);
        columns.Bound(p => p.quantity).Title("Quantity").Width(130);
    })
    .Pageable()
    .Scrollable(scr=>scr.Height(430)) 
    .DataSource(dataSource => dataSource        
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)        
     )
)

And the following markup is generated (only script part shown):

<script>
    jQuery(function () {
        jQuery("#Grid").kendoGrid({
            "columns": [{
                "title": "id",
                "hidden": true,
                "field": "id",
                "filterable": {},
                "encoded": true
            }, {
                "title": "Name",
                "width": "130px",
                "field": "name",
                "filterable": {},
                "encoded": true
            }, {
                "title": "Quantity",
                "width": "130px",
                "field": "quantity",
                "filterable": {},
                "encoded": true
            }],
            "pageable": {
                "buttonCount": 10
            },
            "dataSource": {
                "transport": {
                    "prefix": "",
                    "read": {
                        "url": ""
                    }
                },
                "pageSize": 20,
                "page": 1,
                "total": 0,
                "type": "aspnetmvc-ajax",
                "schema": {
                    "data": "Data",
                    "total": "Total",
                    "errors": "Errors",
                    "model": {
                        "fields": {
                            "id": {
                                "type": "number"
                            },
                            "quantity": {
                                "type": "number"
                            },
                            "name": {
                                "type": "string"
                            }
                        }
                    }
                }
            }
        });
    });
</script>

With that I'm not able to paging the grid on client side. I can add items but the grid.dataSource.total() is always 0 so paging don't work...

I have checked this demo and the generated code is a little different:

$(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: products,
                        schema: {
                            model: {
                                fields: {
                                    ProductName: { type: "string" },
                                    UnitPrice: { type: "number" },
                                    UnitsInStock: { type: "number" },
                                    Discontinued: { type: "boolean" }
                                }
                            }
                        },
                        pageSize: 20
                    },
                    height: 430,
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                        { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                        { field: "Discontinued", width: "130px" }
                    ]
                });
            });

It seems that the dataSource configuration is different... How can I handle this?

Answer 1

You have to set serverPaging: false under filterable property. The datasource of kendo grid is a json where you have to specify the numbers of rows and of course data matching columns declaration.