Applying rowTemplate breaks the column alignment with headers

[Dayanand]

I have used the below rowTemplate for simply changing the background color of the grid TR conditionally upon the bound value of the field ApprovalStatus. 

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

 Now do I actually need to specify the TDs in the template. I already have the columns defined as follows:

 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 } } }
]

But on applying the rowTemplate the columns do not align well with the headers. Your help is sincerely appreciated.

[Rosen]

Hello Dayanand,

Indeed, when using  rowTemplate, you will need to manually handle the rendering of all elements inside the row and producing a valid HTML DOM. Also this includes manually adding both hierarchy and group cells.  The column attributes such as templates or binding field from the declaration will not be used in the rendering as non-default template is used, thus the built-in rendering logic does not have the knowledge of where to put the content.

In the code snippet you have pasted, the elements are misaligned, as the number of cells inside the row template are less the number of columns.

Regards,
Rosen
Telerik