Kendo mvc grid inserted new row with custom class

Question

however i want my added row have a custom class, so I can style my new added row with different background color. How can I achieve this ? am applying below code but its not applying new class to inserted row.

here i tried 2 ways but none of the below working. the new class is not adding to the inserted row.

function onChange(e) {
if (e.action == "add") {
            var uid = e.items[0].uid;
            let dataGrid = $('#Grid').data('kendoGrid');
            let dataView = dataGrid.dataSource.view();

            for (let i = 0; i < dataView.length; i++) {
                if (dataView[i].id === 0) {
                    dataGrid.table.find("tr[data-uid='" + dataView[i].uid + "']").addClass("red");
                }
            }

            or
            
            $("[data-uid='" + uid + "']").addClass('red');
        }
        }

.k-alt.k-master-row.red, .k-master-row.red {
        background-color: red
    }

Answer 1

You can directly add your class in the edit event of the grid:

 edit(e){
    if(e.model.isNew()){
        $("[data-uid='"+e.model.uid+"']").addClass("red");
    }
  }

Here you can check the example: Dojo