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.

What you mean by *mark* ? Like to add a css class in the row to be shown different? — DontVoteMeDown, Mar 16 '16 at 19:55

score 0 · Accepted Answer · answered Mar 16 '16 at 23:53

0

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

answered Mar 16 '16 at 23:53

DontVoteMeDown

21,122
10
69
105

Excellent. Thank you so much... One more thing, how can add css class for edited row (current edited row)? Thanks once again... – oknevermind Mar 17 '16 at 00:23
1

@oknevermind Use the `uid` from `selectedRowData` object instead of the `newRow` object. It may work. – DontVoteMeDown Mar 17 '16 at 00:27
Hi @DontVoteMeDown, I have one more question: my grid is selectable, when i add new row or edit existing, now css class will be added. But, when I select another row within the grid, the last added or edited row still stay selected and i have two selected row in grid. How can solve that problem? Thanks in advance. – oknevermind Mar 17 '16 at 08:08
1

Hi @DontVoteMeDown, I am found a solution: var selectedNew = gridData.table.find('tr[data-uid="' + newRow.uid + '"]'); gridData.select(selectedNew); – oknevermind Mar 17 '16 at 11:01
@oknevermind nice! I was out. Just saw your comments. – DontVoteMeDown Mar 17 '16 at 11:23
Hi @DontVoteMeDown, I again write you (I am so sorry for that).. I need a help (unrelated to this post). If you can, when you have a time please look my new post (question - thread): [link](http://stackoverflow.com/questions/36082610/master-detail-kendo-ui-grid-when-select-row-in-master-grid-get-entries-in-detai) – oknevermind Mar 18 '16 at 14:55
@oknevermind I already see it early today, but I had no time to check, but I will sure take a look. – DontVoteMeDown Mar 18 '16 at 15:13

How can mark newly added row in kendo ui grid

1 Answers1