display different color for new record in kendo grid

[sandy]

Hi,

here i want to display alternate colors with different color for new row inside kendo grid incell edit mode.

[Petar]

Hi Sandy,

Can you give me more details about the functionality you want to implement? Do you want to change the color of the dirty rows or just the new ones? 

Is the targeted functionality that you want to display in a different way the unsaved new rows? 

Regards,
Petar
Progress Telerik

[sandy]

i want to change the colors for new records not dirty records. i just want to display or apply a different color to unsaved new records not unsaved dirty records. unsaved dirty records will display default colors.

[Petar]

Hi Sandy.

What I can suggest is to use the approach discussed in this StackOverflow thread to take the dirty dataItems in the Grid. Then you can filter the dirty items by ID. The rows that are still not saved don't have a definition for the ID field. 

Here is a Dojo example demonstrating how the targeted functionality of adding color to the newly added and unsaved Grid rows can be implemented. The code that adds the targeted color is executed in the function of the edit event. Here is its definition:

edit: function(e){
    $("#ProductName").on("blur", function(){
    var data = $("#grid").data("kendoGrid").dataSource.data();
    var dirty = $.grep(data, function(item) {
        return item.dirty
    });
    var newRows = dirty.filter((item)=>item.ProductID===null);
    console.log("dirty", newRows);

    newRows.forEach((row)=>{
        $($("tr[data-uid='"+row.uid+"']")).addClass("red");
    })
    })
}

I hope the above solution will help you implement what you need in the application you are working on. 

 

[sandy]

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. when i click Add Row  button A new row will inserted inside of Grid. i want to display color to that whole new row .

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

 

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
    }
 
 

[Eyup]

You can achieve this with some CSS:
https://dojo.telerik.com/IjAVaSeF

Feel free to check this sample and let me know if it helps you.