This is a migrated thread and some comments may be shown as answers.

Applying rowTemplate breaks the column alignment with headers

1 Answer 76 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dayanand
Top achievements
Rank 1
Dayanand asked on 05 Jun 2015, 08:12 PM

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.

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 09 Jun 2015, 11:07 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Dayanand
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or