title: Kendo UI Grid style cell based on template-value
body: <p>I would like to set the cellStyle of a specific cell based on its value.</p>
  
  <p>If <strong>Status</strong> == <em>STARTED</em>, i want the background to be green. </p>
  
  <p>If <strong>Status</strong> == <em>STOPPED</em>, i want the background to be red.</p>
  
  <p>consider this table:</p>
  
  <pre><code>   &lt;kendo-grid [data]="gridData" style="height: 200px"&gt;
       &lt;kendo-grid-column field="machineName" title="Machine"&gt;
       &lt;/kendo-grid-column&gt;
       &lt;kendo-grid-column field="article" title="Article"&gt;
       &lt;ng-template kendoGridCellTemplate let-dataItem&gt;
        {{dataItem.article}}
       &lt;/ng-template&gt;
       &lt;/kendo-grid-column&gt;
       &lt;kendo-grid-column field="status" title="Status"&gt;
       &lt;/kendo-grid-column&gt;
     &lt;/kendo-grid&gt;
  </code></pre>
  
  <p>I've tried using conditional [ngClass] and [ngStyle] but none seem to work, naturally I think I do not have access to the templates value at this point, but only inside the <code>&lt;kendo-grid-column&gt;</code> tag. Accessing the current grid-columns value seems harder than I thought. However, it seems to be possible with rows: </p>
  
  <p>Its totally possible to do if I were to apply the styling on the ng-template, but that wont style the entire gridCell. </p>
  
  <p>Here's a stackblitz demonstrating what I want: <a href="https://q12mgf.run.stackblitz.io" rel="nofollow noreferrer">https://q12mgf.run.stackblitz.io</a>.</p>
  
  <p>If you would like to play around with the source-code yourself here it is: <a href="https://stackblitz.com/edit/angular-e5dgt2?file=app%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-e5dgt2?file=app%2Fapp.component.ts</a></p>
  
  <blockquote>
    <p><strong>TL;DR</strong> - <em>How do I style the ENTIRE cell based on Status' value. <code>started = green</code> &amp; <code>stopped = red</code></em>.</p>
  </blockquote>
  
  <p>API: <a href="https://www.telerik.com/kendo-angular-ui/components/grid/styling/" rel="nofollow noreferrer">https://www.telerik.com/kendo-angular-ui/components/grid/styling/</a></p>
  
  <p>Resources: <a href="https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values" rel="nofollow noreferrer">https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values</a></p>