Adding a rowTemplate function to this.dataModelOptions
Opened this issue · 1 comments
robertmazzo commented
Hi,
I've managed to solve an issue where I'm wiring up a rowTemplate
function within a Kendo UI grid.
It's working as follows, but I'd like to actually clean it up a bit without have the code embedded here inside the init:
section:
angular.module('rage')
.factory('GridDataModel', function (WidgetDataModel, gadgetInitService) {
function GridDataModel() {
}
GridDataModel.prototype = Object.create(WidgetDataModel.prototype);
GridDataModel.prototype.constructor = WidgetDataModel;
angular.extend(GridDataModel.prototype, {
init: function () {
var ds = new kendo.data.DataSource({ // init empty Kendo ds
data: [],
schema: {}
});
if (this.dataModelOptions.dataSource != undefined) {
// dataSource object a bit tricky as somtimes '.data' is undefined - 05/27/2015 BM:
if (this.dataModelOptions.dataSource.data != undefined) {
ds.data(this.dataModelOptions.dataSource.data);
}
else {
// not sure if accessing _data is the best solution going forward - 05/27/2015 BM:
ds.data(this.dataModelOptions.dataSource._data)
}
this.dataModelOptions.dataSource = ds;
}
//this.dataModelOptions.rowTemplate = this.buildRowTemplate(data); // NOPE !
this.dataModelOptions.rowTemplate = function (data) {
var templ = '';
var tr = '<tr data-uid="' + data.uid + '">';
var td = '';
var rgb = '';
for (var key in data) {
// code omitted...
}
templ = tr + td + '</tr>';
function getColor(exposure, limit) {
var pct = exposure / limit;
var color;
// code omitted..
}
return color;
}
return templ;
};
this.updateScope(this.dataModelOptions);
},
updateScope: function (data) {
this.dataModelOptions = data;
},
destroy: function () {
WidgetDataModel.prototype.destroy.call(this);
}
});
return GridDataModel;
});
robertmazzo commented
I would rather do something like this below, where my buildRowTemplate
and getColor
anom functions are defined as properties of my GridDataModel
.
However, when it hits this line, Kendo blows up saying "rowTemplate is undefined"
this.dataModelOptions.rowTemplate = this.buildRowTemplate(data);
Same problem if I defined it like this:
this.dataModelOptions.rowTemplate = function (data) {this.buildRowTemplate(data)} ;
For example:
angular.module('rage')
.factory('GridDataModel', function (WidgetDataModel, gadgetInitService) {
function GridDataModel() {
}
GridDataModel.prototype = Object.create(WidgetDataModel.prototype);
GridDataModel.prototype.constructor = WidgetDataModel;
angular.extend(GridDataModel.prototype, {
init: function () {
this.dataModelOptions.rowTemplate = this.buildRowTemplate(data); // NOPE !
// dataModelOptions are re-assigned in 'GridSettingsCtrl' controller, and persisted in 'DashboardState' factory
this.updateScope(this.dataModelOptions);
},
updateScope: function (data) {
this.dataModelOptions = data;
},
destroy: function () {
WidgetDataModel.prototype.destroy.call(this);
},
buildRowTemplate: function (data) {
var templ = '';
var tr = '<tr data-uid="' + data.uid + '">';
// ...
templ = tr + td + '</tr>';
return templ;
},
getColor: function (exposure, limit) {
var pct = exposure / limit;
var color;
//...
return color;
}
});
return GridDataModel;
});