JK_Jha JK_Jha - 1 year ago 961
AngularJS Question

Format csv export according to cellTemplate in ui-grid

I have a column in ui-grid table which contain a JSON object. Which I parse in cellTemplate and display.
Column "owner_details" has following data:

"owner_details": {
"area_cost_center_manager": "avd",
"area_bug_shepherd": "vdvd,vdvd",
"area_owner": "vdvd,vdvd",
"area_triage_owner": "vdvd,vdvd"

For this I have defined the column:

$scope.gridOptions.columnDefs = [
{name: 'Edad', width: 150, pinnedLeft: true, displayName: "Area ", /*"cellTooltip": function(row, col){ return row.entity.area_description;}*/},
{name: 'Nombres', width: 200, pinnedLeft: true, displayName:"Workload ", /*"cellTooltip": function(row, col){ return row.entity.workload_description;}*/},
{name: 'owner_details', width: 300, pinnedLeft: true, cellTemplate: jsonTemplate,displayName: "Site ", visible: true},
{name: 'test', width: 50, pinnedLeft: true, displayName: "Test ", visible: true},
{name: 'verified', width: 50, pinnedLeft: true, displayName: "Verified? ", visible: false},

I have created a custom template to arrange the Json Data of column owner_details

var jsonTemplate = '<div class="ngCellText ng-class="col.colIndex()"> Owner: {{COL_FIELD.area_cost_center_manager}} <br> TO: {{COL_FIELD.area_triage_owner}}</div></div>';

But when I do export of this table, the data in owner_details table breaks obviously because it is not a String rather a object and contains comma.

So my question is how I can customize this data, or do pre-processing before csv export so that I should be able to export in almost same format as in the template.

Here is my plunkr. http://plnkr.co/edit/gAt1fp39dbgbbUCyBeJw?p=preview

Please let me know if you need any further information.

Answer Source

Above answer works well as a work around but I have figured out a very efficient and direct way to achieve that using already available ui-grid api. Hence posting my answer which I think may help others.

ui-grid has already an api available to achieve that using the function exporterFieldCallback we can format a cell value before exporting.

A function to call for each field before exporting it. Allows massaging of raw data into a display format, for example if you have applied filters to convert codes into decodes, or you require a specific date format in the exported content. The method is called once for each field exported, and provides the grid, the gridCol and the GridRow for you to use as context in massaging the data. Returns object you must return the massaged value ready for exporting

For example if i want to format the cell "status" before exporting it, we can do like this:

gridOptions.exporterFieldCallback = function ( grid, row, col, value ){
  if ( col.name === 'status' ){
    value = decodeStatus( value );
  return value;

In my case, I had a column "owner details" which was an object, which was not exporting properly because of commas and special chars in JSON object.

So when I click export, I asked ui-grid to format the data in readable format and then export.

Please see my plunkr for more details.