Настройка сетки Kendo-UI в сетке с помощью Javascript

Ответ 1

В основном, если вы хотите обновить запись, вы должны использовать метод set модели. Например, чтобы обновить первую запись dataSource, вы должны ее обновить следующим образом:

var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
firstItem.set('FirstName','The updated Name');

Вышеуказанное должно автоматически пометить флаг как грязный, и он уведомит сетку о том, что есть изменения, поэтому сетка автоматически будет refresh.

Также, если вы хотите получить объект, связанный с определенной строкой, вы можете использовать метод dataItem сетки.

Ответ 2

После ответа Печки выше, я добавил дополнительный код, чтобы отметить отредактированную ячейку грязным флагом.

Здесь мой код бритвы, необходимый для столбца, чтобы это работало, я добавил имя класса, чтобы позднее его можно было использовать в селекторе jquery.

columns.Bound(r => r.RoomRate).HtmlAttributes(new { @class = "grid-allotment-roomrate" });

Здесь мой код JQuery для обновления ячейки и отметки отредактированной ячейки после успешного поиска данных со стороны сервера.

var dataSource = $("#grid-allotments").data("kendoGrid").dataSource;
var data = dataSource.data();
$.each(data, function (index, rowItem) {
    var checkbox = $("#checkbox_" + rowItem.RoomTypeId + "_" + rowItem.Date.getTime());
    if (checkbox != null && checkbox.is(':checked')) {
        $.ajax({
            url: "RackRate/GetRackRateForRoomTypeOn",
            type: "POST",
            data: { roomTypeId: rowItem.RoomTypeId, date: rowItem.Date.toUTCString() },
            success: function (result) {
                data[index].set('RoomRate', result);
                $('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');
            }
        });
    }
});

Ниже приведена строка кода, которая отвечает за выделение грязного флага.

$('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');

Ответ 3

Я делаю это очень простым и эффективным способом:

 var employee = employeeDataSource.get(employeeId);
     employee.dirty = true;  // set it as dirty
     employeeDataSource.sync();  //Tell the DataSource object to save changes

Это старый вопрос, но надеюсь, что он может помочь кому-либо с той же проблемой.

Ответ 4

Я использую его таким образом - по крайней мере, с флажками. Я поставлю столбец с кнопкой "Изменить", чтобы выглядеть так:

columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);

И пусть он, щелкнув в первом столбце (у меня есть изображение с гиперссылкой), использует функцию onclick для программного нажатия кнопки "Изменить", установите флажок, затем нажмите кнопку "Обновить". Вероятно, более "старая школа", но мне нравится знать, что она следит за порядком, который я буду делать, если бы я сам его обновлял.

Я передаю объект ("this"), поэтому я могу получить строку и флажок, когда он появится, новый статус 0 или 1 (у меня есть код, который его использует, не очень необходимый для этой демонстрации, хотя, поэтому я оставляю эту часть из своей функции для простоты) и идентификатор этого элемента:

columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#");

function changeCheckbox(obj, status, id) {
    var parentTr = obj.parentNode.parentNode;
    $('[id="btnEdit_' + id + '"]').click();

    parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over
    parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id);
    $('[id=chkbox_' + id + ']').click().trigger("change");
    $('[id=chkbox_' + id + ']').blur();

    var btnUpdate = $('[id="btnUpdate_' + id + '"]');
    $('[id="btnUpdate_' + id + '"]').click();

}

Приведенный выше код предполагает, что флажок находится в первом столбце. В противном случае отрегулируйте первый childNodes[0] на этой строке chkbox setAttribute на столбец, в котором он находится, минус один, потому что он начинает отсчет с нуля.

Ответ 5

Для меня это работает (нет необходимости создавать сетку):

   select: function(e) {
           console.log("select");
           var item = e.item;
           var text = item.text();
           var index = item.index();
           console.log(item);
           console.log(text);
           console.log(index);
           var dataItem = this.dataItem(index);
           console.log(dataItem);
           // SET RETURNED VALUES FOR MODEL
           options.model.set("actionName.id", dataItem.id);
         }

Ответ 6

set("fieldname",value) автоматически обновит сетку, есть простой способ просто обновить значение UI и значение поля без необходимости обновлять. просто выполните, например:

    data.FieldName = "Whatevervalue";
    $(currentrow.children()[getColumnIndex("FieldName")]).text("Whatevervalue");

    function getColumnIndex(columnName) {
    var index;
    var columns = $("#grid").data("kendoGrid").columns;
    for (var i = 0; i < columns.length; i++) {
        if (columns[i].field == columnName) {
            index = i;
            return index;
        }
    }
}

    var data = $grid.data("kendoGrid")._data;
    var currentrow = $grid.data("kendoGrid").tbody.find("tr[data-uid='" +      data[i].uid + "']");

Надеюсь, что это поможет