javascript - How can mark newly added row in kendo ui grid

Question

I am working on kendo UI grid which is located whitin tabstrip (tabstrip.select(0)). Fields for input are located in second tabstrip (tabstrip.select(1)). Crud operations working properly. My button save click event look's like this:

function saveDataMasterGrid() {
    tabstrip.select(0);
    var field1 = $("#field1").val();
    var field2 = $("#field2").val();
    var field3 = $("#field3").val();
    var field4 = $("#field4").val();
    var field5 = $("#field5").val();
    var field6 = $("#field6").val();
    var field7 = $("#field7").val();
    var field8 = $("#field8").val();

    var gridData = $("#gridMaster").data("kendoGrid");
    var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));

    if (selectedRowData != null || selectedRowData != undefined) {
        gridData.dataSource.pushUpdate({
            Id: selectedRowData.Id,
            dataField1: field1,
            dataField2: field2,
            dataField3: field3,
            dataField4: field4,
            dataField5: field5,
            dataField6: field6,
            dataField7: field7,
            dataField8: field8
        });
    } else {
        gridData.dataSource.add({
            Id: gridData.dataSource.total() + 1,
            dataField1: field1,
            dataField2: field2,
            dataField3: field3,
            dataField4: field4,
            dataField5: field5,
            dataField6: field6,
            dataField7: field7,
            dataField8: field8
        });
    }

How can mark newly added/edited row in kendo ui grid? Any help appreciated. Thank you in advance.

Answer 1

The dataSource's method add() return the dataItem of the newly added row. So you can find the row by its uid property:

// After calling add()...

$(grid.tbody)
    .find("tr").removeClass("new-row") // Remove recent added tr's .new-row classes
    .filter('tr[data-uid="' + newRow.uid + '"]').addClass("new-row"); // Add class to the new row

Demo