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 с вашим делом.

Если вы хотите сохранить эти изменения на сервере, я предлагаю вам начать с демонстраций.

Другие вопросы по тегам