Kendo UI Grid, редактируемый режим не работает для локальных данных
Я работаю с Kendo UI Grid. Это мой код:
<body>
<div id="myGrid"></div>
<script type="text/javascript">
$(function(){
var rows = [
{name: "name001", id: "001", group: "G1"},
{name: "name002", id: "002", group: "G1"},
{name: "name003", id: "003", group: "G2"},
{name: "name004", id: "004", group: "G2"},
];
var myDataSource =
new kendo.data.DataSource({
data: rows,
pageSize: 3,
});
myDataSource.read();
$("#myGrid").kendoGrid({
dataSource: myDataSource,
columns: [
{field:"name", title:"The Name"},
{field:"id", title:"The Id"},
{field:"group"},
{command:["edit", "destroy"]}
],
scrollable: false,
pageable: true,
sortable: true,
groupable: true,
filterable: true,
editable: "inline"
});
});
</Script>
</body>
Но редактирование не работает. Открытие этой сетки в браузере дает мне сетку, которая выглядит, как и ожидалось, с кнопками Edit и Delete. Я могу удалить строки с помощью кнопки Удалить. Но нажатие кнопки "Изменить" переводит строку в режим редактирования (с полями ввода в ячейках), но изменение значения и нажатие кнопки "Обновить" ничего не дает. Строка остается в режиме редактирования, и кнопка "Обновить" не переключается обратно на "Редактировать", как это должно быть. Можете ли вы сказать мне, что не хватает? Нужно ли как-то настраивать источник данных?
1 ответ
Да, вы пропустили настройку источника данных вашей Grid, чтобы знать, как обновлять записи. Я предполагаю, что вы хотите редактировать записи только локально (на клиенте) - без отправки их на сервер. Чтобы фактически закрыть Grid и применить изменения, вы можете использовать событие сохранения Grid и метод refresh.
Вот jsbin с вашим делом.
Если вы хотите сохранить эти изменения на сервере, я предлагаю вам начать с демонстраций.