I am looking to utilize an MVC helper for constructing a grid on the server side, with the ability to dynamically add and remove rows on the client side.
To achieve this functionality, I have implemented 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)
)
)
Upon generating the markup (only showing the script portion), the following code is produced:
<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>
However, I encountered an issue where I could not page the grid on the client side. Despite being able to add items, the grid.dataSource.total() always returns 0, rendering paging ineffective.
After reviewing this demo, I noticed that the generated code structure varies slightly:
$(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 appears that the configuration of the dataSource differs in this case. How can I address this discrepancy?