Changing color of Specific row

[Swapnil]

Hi Team,

In kendo grid jquery I have added data to a data Source in JSON format. In this format, there is a property in the JSON. If that property is true, I want to change the color of the row. Is it possible to set a different color?

gridData = @Html.Raw(ViewData["DataDetailsJson"]);


var dataSource = new kendo.data.Data Source({
    data: gridData,
    batch: true,
    autoSync: true,
    schema: {
        model: {
            id: "uid",
            fields: {
                id: { hidden: true },
                Project: { editable: false },
                User: { editable: false },
                Status: { editable: false },
            },
        },
    },
});

[Neli]

Hello,

I would suggest using columns.template:

- https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.template

In the template you can customize the cell appearance. For example you can add custom class. Then, you can use the class to style the needed rows. 
Below is an example:

columns: [ 
          {
            field: "name"    
          },
          {
            field: 'color',
            template: function(dataItem) {
              let html = ''
              if(dataItem.color){
                html = "<span class='custom'>" + dataItem.color + "</span>";
              }else{
                html = "<span>" + dataItem.color + "</span>";
              }
              return html;              
            }
          }
        ],
        dataBound: function(){
          $('.custom').closest('tr').css('background-color', 'violet').css('color', 'white')
        },

Here is a Dojo example where this is demonstrated - https://dojo.telerik.com/@NeliKondova/AjeCiXok

I hope this helps.

Regards,
Neli
Progress Telerik

[Swapnil]

Hi Neil ,

I'm currently working on a project where I have a grid populated with data from the following JSON format:

[
  {
    "id": 1,
    "name": "Item 1",
    "status": true
  },
  {
    "id": 2,
    "name": "Item 2",
    "status": false
  },
  {
    "id": 3,
    "name": "Item 3",
    "status": true
  },
  {
    "id": 4,
    "name": "Item 4",
    "status": false
  }
]

I'm looking for advice on the best approach to dynamically add colors to rows in the grid based on the "status" property. If the status is true, I want to apply a specific color to that row; otherwise, I want it to remain the default.

I'm open to suggestions and would love to hear about any recommended practices or efficient ways to handle this. If you have any insights or advice, please share them with me.

Thank you so much for your time and assistance.

Best regards, Swapnil

[Neli]

Hi Swapnil,

You can use the same approach as described in my previous reply. If you need to change the colors of the row after a value in the Status column has been edited, you can handle the save event.

- https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/save

In the event handler you can add or remove the class applied to the entire row:

 dataBound: function(){  
            $('.custom').closest('tr').addClass('custom-row')
          },         
          save: function(e){ 
           if(e.values.status){
                $(e.container).closest('tr').addClass('custom-row')
          }else if(e.values.status == false){
               $(e.container).closest('tr').removeClass('custom-row')
           }         
 },

Here you will find the modified Dojo example where the data form the provided snippet is used. 

Regards,

Neli