Я хочу использовать помощник MVC для построения сетки на стороне сервера, но после того, как я хочу добавить и удалить строки на стороне клиента.
Поэтому я использую следующую оболочку:
@(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)
)
)
И генерируется следующая разметка (показана только часть скрипта):
<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>
При этом я не могу развернуть сетку на стороне клиента. Я могу добавлять элементы, но grid.dataSource.total()
всегда 0
, поэтому пейджинг не работает...
Я проверил эту демонстрацию, и сгенерированный код немного отличается:
$(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" }
]
});
});
Кажется, что конфигурация dataSource
отличается... Как я могу справиться с этим?