Adding a rowTemplate function to this.dataModelOptions

[robertmazzo]

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]

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;
  });