display different color for new record in kendo grid

1 Answer 25 Views
Grid
sandy
Top achievements
Rank 1
Iron
Veteran
sandy asked on 08 Sep 2021, 09:31 AM

Hi,

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

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 09 Sep 2021, 09:44 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

sandy
Top achievements
Rank 1
Iron
Veteran
commented on 10 Sep 2021, 05:07 AM

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
Telerik team
commented on 14 Sep 2021, 10:59 AM

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
Top achievements
Rank 1
Iron
Veteran
commented on 28 Sep 2021, 09:06 AM

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
Telerik team
commented on 01 Oct 2021, 08:43 AM

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.

Tags
Grid
Asked by
sandy
Top achievements
Rank 1
Iron
Veteran
Answers by
Petar
Telerik team
Share this question
or