Kendu Grid - Function inside row template always undefined - css

Question

I am trying to use a custom row template on my grid so i can give various class declarations to individual cells in the grid.
The function i am trying to call to return the string for the css class is always undefined, no matter where i declare it.
This is the code for my grid declaration file:
(function(){
'use strict';
var logPrefix = 'sampleRequestTrackingGrid --> ';
var rowTemplateString =
'<tr data-uid="#= uid #">' +
'<td>#: requestedBy #</td>' +
'<td>#: site #</td>' +
'<td>#: sampleLot#</td>' +
'<td>#: sampleProcess #</td>' +
'<td>#: workOrderId #</td>' +
'<td>#: equipmentId #</td>' +
'<td>#: area #</td>' +
'<td>#: cell #</td>' +
'<td>#: station #</td>' +
'<td>#: testMethods #</td>' +
'<td>#: requestedDate #</td>' +
'<td class="#: getStatus(requestStatus) #">#: requestStatus #</td>' +
'<td>#: requestStatusMsg #</td>' +
'<td>#: requestId #</td>' +
'</tr';
function getStatus(requestStatus){
if(requestStatus === 'In Queue'){
return 'inQueue';
}
else if(requestStatus === 'In Progress'){
return 'inProgress';
}
else if(requestStatus === 'Complete'){
return 'complete';
}
else if(requestStatus === 'Failed'){
return 'failed';
}
}
angular.module('wm.sampleRequestTracking')
.constant('SampleRequestTrackingGrid', {
options: function(model){
return {
dataBound: model.onGridDataBound,
dataSource: {
data: model.gridData,
schema: {
model: {
id: "requestSysI",
fields: {
requestSysI: {editable: false},
requestedBy: {editable: false},
site: {editable: false},
sampleLot: {editable: false},
sampleProcess: {editable: false},
workOrderId: {editable: false},
equipmentId: {editable: false},
area: {editable: false},
cell: {editable: false},
station: {editable: false},
testMethods: {editable: false},
requestedDate: {editable: false, type: "datetime"},
requestStatus: {editable: false},
requestStatusMsg: {editable: false},
requestId: {editable: false}
}
}
},
pageSize: 200
},
scrollable: true,
resizable: true,
reorderable: true,
pageable: true,
groupable:true,
filterable: true,
autobind: false,
columnMenu: true,
navigatable: true,
selectable: true,
sortable: {mode: "multiple"},
columns: [
{field: "requestedBy", title: "Requested By", width: "100px", hidden: false},
{field: "site", title: "Site", width: "100px", hidden: false},
{field: "sampleLot", title: "Lot", width: "100px", hidden: false},
{field: "sampleProcess", title: "Process", width: "100px", hidden: false},
{field: "workOrderId", title: "Work Order", width: "100px", hidden: false},
{field: "equipmentId", title: "Equipment", width: "100px", hidden: false},
{field: "area", title: "Request Area", width: "100px", hidden: false},
{field: "cell", title: "Request Cell", width: "100px", hidden: false},
{field: "station", title: "Request Station", width: "100px", hidden: false},
{field: "testMethods", title: "Test Methods", width: "100px", hidden: false},
{field: "requestedDate", title: "Request Date", width: "100px", hidden: false},
{field: "requestStatus", title: "Request Status", width: "100px", template: "<span id='reqStatus'>#=requestStatus#</span>"},
{field: "requestId", title: "Request Id", width: "100px", hidden: false}
],
rowTemplate: rowTemplateString
};
}
});
})();
Assuming everything was working correctly, I would change the background color of the classes using the following CSS inside a .less file
.inQueue {
background-color: white;
}
.inProgress {
background-color: #fda;
}
.complete {
background-color: #ced;
}
.failed {
background-color: #fdd;
}
But, every time i run the code and try to load the grid i get an error telling me that getStatus() function is not defined.
Can anyone offer some assistance in figuring out what i am doing wrong here?
For reference: the Telerik article i was following is
https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values

Answer 1

I ended up not using a row template, as i realized it was a little unnecessary and too complex for what i needed, and instead modified my field template.
Also, as #Soham commented, placing the getStatus function outside the IIFE did work. I had done that previously, but perhaps it was because of my typo on the tr that it failed before.
(function(){
'use strict';
var logPrefix = 'sampleRequestTrackingGrid --> ';
angular.module('wm.sampleRequestTracking')
.constant('SampleRequestTrackingGrid', {
options: function(model){
return {
dataBound: model.onGridDataBound,
dataSource: {
data: model.gridData,
schema: {
model: {
id: "requestSysI",
fields: {
requestSysI: {editable: false},
requestedBy: {editable: false},
batteryId: {editable: false},
site: {editable: false},
sampleLot: {editable: false},
sampleProcess: {editable: false},
workOrderId: {editable: false},
equipmentId: {editable: false},
area: {editable: false},
cell: {editable: false},
station: {editable: false},
testMethods: {editable: false},
requestedDate: {editable: false, type: "datetime"},
requestStatus: {editable: false},
requestStatusMsg: {editable: false},
requestId: {editable: false}
}
}
},
pageSize: 200
},
scrollable: true,
resizable: true,
reorderable: true,
pageable: true,
groupable:true,
filterable: true,
autobind: false,
columnMenu: true,
navigatable: true,
selectable: true,
sortable: {mode: "multiple"},
columns: [
{field: "requestedBy", title: "Requested By", width: "100px", hidden: false},
{field: "batteryId", title: "Battery", width: "100px", hidden: false},
{field: "site", title: "Site", width: "100px", hidden: false},
{field: "sampleLot", title: "Lot", width: "150px", hidden: false},
{field: "sampleProcess", title: "Process", width: "150px", hidden: false},
{field: "workOrderId", title: "Work Order", width: "100px", hidden: false},
{field: "equipmentId", title: "Equipment", width: "100px", hidden: false},
{field: "area", title: "Request Area", width: "100px", hidden: false},
{field: "cell", title: "Request Cell", width: "100px", hidden: false},
{field: "station", title: "Request Station", width: "100px", hidden: false},
{field: "testMethods", title: "Test Methods", width: "100px", hidden: false},
{field: "requestedDate", title: "Request Date", width: "100px", hidden: false},
{field: "requestStatus", title: "Request Status", width: "100px", template: "<div class='#=getStatus(requestStatus)#' id='reqStatus' style='text-align: center'>#=requestStatus#</div>"},
{field: "requestId", title: "Request Id", width: "100px", hidden: false}
]
};
}
});
})();
function getStatus(requestStatus){
if(requestStatus === 'In Queue'){
return 'inQueue';
}
else if(requestStatus === 'In Progress'){
return 'inProgress';
}
else if(requestStatus === 'Complete'){
return 'complete';
}
else if(requestStatus === 'Failed'){
return 'failed';
}
}
With the end result being:
screenshot of column