angularjs - online - ¿Cómo aplicar el estilo condicionalmente a una grilla de la UI de Kendo ''row''?

kendo ui grid angular 4

Question

Tengo las siguientes gridOptions de UI de Kendo para mi página angular:

ctrl.gridOptions = {
        rowTemplate: ''<tr data-uid="#: uid #" class="#:ApprovalStatus=/'Approved/'? /"approved/" : /"unapporved/"#"></tr>'',
        //rowTemplate: ''<tr data-uid="#: uid #" class="#:ApprovalStatus=/'Approved/' ? /'approved/' : /'unapproved/' #"><td>#:ProcessName #</td><td>#:TradeAmount #</td><td>#:AQRID #</td><td>#:ApprovalStatus #</td></tr>'',
        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: ''<input ng-disabled="dataItem.ApprovalStatus" ng-model="dataItem.IsChecked" type="checkbox" />'', filterable: false, headerTemplate: ''<input type="checkbox" ng-click="ctrl.checkAllTrades()" ng-model="ctrl.tradesChecked">'' },
            { field: "ProcessName", title: "Process Name", width: "190px", filterable: { cell: { showOperators: false, template: processNameDropDownEditor } }, template: ''<a style="font-size: x-normal;" href="#=Link#">{{dataItem.ProcessName}}</a>'', 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,
    };

Los estilos aprobados y no aprobados se definen a continuación:

.approved {
        background-color: green;
    }

.unapproved{
        background-color: red;
    }

Entonces, el problema es que cuando aplico la plantilla de fila la cuadrícula se vuelve vacía. Y cuando aplico el rowTemplate comentado, la cuadrícula se representa con las filas, pero solo se aplica el estilo ''aprobado'' como se muestra a continuación:

¿Cómo puedo aplicar el estilo a cada TR en función de la condición en un campo vinculado a datos? Además, cuando se aplica el rowTemplate comentado, las columnas no se muestran correctamente, ¿cómo podemos solucionarlo?

ACTUALIZAR:

El siguiente rowTemplate ayudó a solucionar el problema de color de fondo. Pero aún no se puede solucionar el problema de alineación de columna.

rowTemplate: ''<tr data-uid="#: uid #" ng-class="{approved: /'#:ApprovalStatus#/' ==/'Approved/', unapproved: /'#:ApprovalStatus#/' ==/'Unapproved/'}"><td>#:ProcessName #</td><td>#:Account #</td><td>#:AQRID #</td><td>#:ApprovalStatus #</td></tr>'',

Answer 1

ng-class usar la directiva ng-class aquí

rowTemplate: ''<tr data-uid="#: uid #" ng-class="{approved : #:ApprovalStatus# ==/'Approved/', unapporved: #:ApprovalStatus# !=/'Approved/'></tr>''

Answer 2

Puedes revisar este fiddle , espero que ayude ...