This is a migrated thread and some comments may be shown as answers.

Change cell text color after input

6 Answers 623 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 22 Jul 2019, 02:26 PM
Hi - I currently have an editable cell in my grid, and after the cell closes I want the text to change color. Is there a way to do this?

6 Answers, 1 is accepted

Sort by
0
Steven
Top achievements
Rank 1
answered on 22 Jul 2019, 03:01 PM

I figured it out.

 

$('td').each(function() {
    if ($(this).text() == newValue) {
        $(this).addClass('success');
    }
});
0
Steven
Top achievements
Rank 1
answered on 22 Jul 2019, 03:12 PM
Sorry for the multiple posts, the above actually loops the grid and sets all cells that match my new value to the success class. I only want that specific cell changed.
0
Nikolay
Telerik team
answered on 24 Jul 2019, 10:16 AM
Hello Steven,

To achieve text coloring once a cell is edited you can apply a single CSS rule:

td.k-dirty-cell {
       color: orange;
     }

Once a grid cell is eddited it automatically receives class .k-dirty-cell.

Please review the demo I have prepared for you:

Hope this helps and if there is anything we could assist further, please contact us back.

Regards,
Nikolay
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Steven
Top achievements
Rank 1
answered on 24 Jul 2019, 12:41 PM
After looking at the html for an updated td in my grid, kendo isn't adding the .k-dirty-cell class for me. I'm not exactly sure why mine doesn't but yours does.
0
Steven
Top achievements
Rank 1
answered on 24 Jul 2019, 01:27 PM

Sorry again for the multiple posts. Upon further examination it looks like the dirty class is being added after the edit, but after the edit function ends, it removes the class.

On edit - it adds k-edit-cell

After edit - it becomes k-edit-cell.k-dirty-cell

After the edit blur function ends, it removes all classes.

0
Nikolay
Telerik team
answered on 25 Jul 2019, 08:27 AM
Hi Steven,

On the demo I have provided you everything works as described. Once the edit of a cell finishes the .k-dirty-cell class is not removed.

Is there a chance you have set "autoSync: true" in your dataSource? This automatically saves any changed data items by calling the sync method.

If possible please provide your configuration so I can examine and advise.

Regards,
Nikolay
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Steven
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or