Angular JQXGrid cellsrender sets “value” as a string, but looks wrong if i pass in an object

Question

The Angular JqxGrid has a cellsrenderer function call on rows i am leveraging. It has the arguments: index, datafield, value, defaultvalue, column, rowdata

I wanted to do some magic in the cellsrender, but it seems when the column accesses a value which is an object it will stringify it to "[object]" and thats not ideal. I also looked at it in terms of "rowdata" but it is already stringified.

How do i access the actual object to use its properties for rendering? I tried to access the underlying data list, but when clicking and refreshing the data, it will throw errors due to index not being accessible, so I am a bit town on how to unstring this information.

Im tempted to process the raw data to a string before the grid uses it, but i dont think that would be the best thing. I would think that the cellsrenderer should do that.

My coworker wanted me to assign all properties of the object to the datafield, but i dont like that option. If looking at it as a dynamic solution so im not sure i like adding the values into the datafield for each item i want to leverage in a row's value

Answer 1

I solved this in a fairly elegant way.

All data which is going to be a part of the dataAdapter, I check for complex objects and stringify them.

var data = []; //dataset
data.map( row => {
  let x = {};
  if (obj.hasOwnProperty(v) && obj[v] && obj[v].constructor === {}.constructor){
    x[v] = JSON.stringify(obj[v]);
  }else {
    x[v] = obj[v];
  }
  return x;
});

Now that the data is primed, and the columns are set we go into the cellsrenderer:

col.cellsrenderer = (index: number, datafield: string, value: any, defaultvalue: any, column: any, rowdata: any): string => {
  let decode = value;
  try {
    decoded = JSON.parse(value);
  }catch (e){ 
    decoded = value;
  }

  //Now you can do custom stuff with a formatter:
  let formatter = getFormatter(XXXXX);
  let cell = `<div>${formatter.format(decoded)}</div>`; 
  //decoded would be an object OR a fundamental type string, number, etc.

  // When doing cellrenderer, you will only be able to use globalclasses, so custom component based class defintions will not work.  If needed, you would use inline styles, or expose global css/scss for a cell.
  return cell;
}