title: How to conditionally apply style to a Kendo UI grid 'row'?
body: <p>I have the below Kendo UI gridOptions for my angular page:</p>
  
  <pre><code>ctrl.gridOptions = {
          rowTemplate: '&lt;tr data-uid="#: uid #" class="#:ApprovalStatus=\'Approved\'? \"approved\" : \"unapporved\"#"&gt;&lt;/tr&gt;',
          //rowTemplate: '&lt;tr data-uid="#: uid #" class="#:ApprovalStatus=\'Approved\' ? \'approved\' : \'unapproved\' #"&gt;&lt;td&gt;#:ProcessName #&lt;/td&gt;&lt;td&gt;#:TradeAmount #&lt;/td&gt;&lt;td&gt;#:AQRID #&lt;/td&gt;&lt;td&gt;#:ApprovalStatus #&lt;/td&gt;&lt;/tr&gt;',
          dataSource: {
              type: 'json',
              transport: {
                  read: function (options) {
                      DataSvc.getTradesData().then(function (response) {
                          options.success(response.data);
  
                      }, function (response) {
                          alert('something went wrong')
                          console.log(status);
                      });
                  }
              },
              schema: {
                  model: {
                      fields: {
                          IsChecked: { type: "boolean" },
                          ProcessName: { type: "string" },
                          TradeAmount: { type: "number" },
                          ApprovalStatus: { type: "string" }
                      }
                  }
              },
          },
          selectable: "row",
          sortable: true,
          columns: [
              { field: "IsChecked", width: "30px", title: " ", template: '&lt;input ng-disabled="dataItem.ApprovalStatus" ng-model="dataItem.IsChecked" type="checkbox" /&gt;', filterable: false, headerTemplate: '&lt;input type="checkbox" ng-click="ctrl.checkAllTrades()" ng-model="ctrl.tradesChecked"&gt;' },
              { field: "ProcessName", title: "Process Name", width: "190px", filterable: { cell: { showOperators: false, template: processNameDropDownEditor } }, template: '&lt;a style="font-size: x-normal;" href="#=Link#"&gt;{{dataItem.ProcessName}}&lt;/a&gt;', attributes: { style: "text-align:left;" } },
              { field: "TradeAmount", title: "Trade Amount", width: "120px", filterable: { cell: { showOperators: false } } },
              { field: "ApprovalStatus", title: "Approval Status", width: "150px", filterable: { cell: { showOperators: false, template: approvalStatusDropDownEditor } } }
          ],
          filterable: { mode: "row" },
          height: 550,
      };
  </code></pre>
  
  <p>The  approved &amp; unapproved styles are defined as below:</p>
  
  <pre><code>.approved {
          background-color: green;
      }
  
  .unapproved{
          background-color: red;
      }
  </code></pre>
  
  <p>So the problem is that when I apply the row template the grid is rendered empty. And when I apply the commented rowTemplate, then the grid is render with the rows, but only the 'approved' style is applied as shown below:</p>
  
  <p><img src="https://i.stack.imgur.com/vuoCJ.png" alt="enter image description here"></p>
  
  <p>How can I apply the style to each TR based on the condition on a data bound field? Also when the commented rowTemplate is applied the columns are not displayed properly, how can we fix that ?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>The below rowTemplate helped be fix the background-color problem. But still unable to fix the column alignment issue.</p>
  
  <pre><code>rowTemplate: '&lt;tr data-uid="#: uid #" ng-class="{approved: \'#:ApprovalStatus#\' ==\'Approved\', unapproved: \'#:ApprovalStatus#\' ==\'Unapproved\'}"&gt;&lt;td&gt;#:ProcessName #&lt;/td&gt;&lt;td&gt;#:Account #&lt;/td&gt;&lt;td&gt;#:AQRID #&lt;/td&gt;&lt;td&gt;#:ApprovalStatus #&lt;/td&gt;&lt;/tr&gt;',
  </code></pre>