7

I want to apply red color to row whose completedIn hours column value is greater than 24. how can i do it. please help i am new to angular.

<kendo-grid [kendoGridBinding]="gridData">
    <kendo-grid-column field="RequestNumber" title="Request No."  
width="110" >
    </kendo-grid-column>
<kendo-grid-column field="RequestNumber" title="Request No."  width="110" >
    </kendo-grid-column>
<kendo-grid-column field="Name" title="Name."  width="110" >
    </kendo-grid-column>
<kendo-grid-column field="CompletedIn" title="CompletedIn"  width="110" >
    </kendo-grid-column>
 </kendo-grid>
user9287106
  • 141
  • 3
  • 13

3 Answers3

7

First: you have to add [rowClass] to your grid

<kend-grid [rowClass]="rowCallback">
</kendo-grid>

then you need to add the function inside the component and return the needed class

public rowCallback(context: RowClassArgs) {
  if (context.dataItem.someProperty) {   // change this condition as you need
    return {
      passive: true
    };
  }
}

and last you need to have a CSS class with the name you returned,(in this case passive but of course you can change it as you want)

@Component({
  selector: "your-component",
  templateUrl: "./your.component.html",
  encapsulation: ViewEncapsulation.None,
  styles: [
    `
     .k-grid tr.passive {
        background-color: lightgray;
      }

    `
  ]
})

it is very important to use encapsulation: ViewEncapsulation.None and name the class with the prefix .k-grid tr otherwise you will not get the needed result

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
1

Use the rowClass callback to provide a custom class to all rows whose data items meet some custom criteria, then style them via CSS, e.g.:

DOCS + DEMO

topalkata
  • 2,028
  • 2
  • 12
  • 13
-1

This will mark the rows with red background color if the above condition is met 

<tr *ngFor="let myObject of myArray;" [ngStyle]="{'background-color':myObj.completedIn>24 ? 'red' : '' }">
   <!-- your other code -->
</tr>
Sebastian Gomes
  • 775
  • 9
  • 12