Format csv export according to cellTemplate in ui-grid

Question

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 1

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.

http://plnkr.co/edit/NHkmtRsZTy404iz3bxN0?p=preview

Answer 2

Note: While this works, the answer by the original asker is even better, and I suggest you work with that instead. I will leave this up as an alternative for those that do not want to get involved with the API.

The problem is that the object is being returned with quotations, and is causing the CSV to parse incorrectly.

I have made two changes to the plunk:

First change

The column definitions have been changed to add each section of the owner_details as it's own column item. This is so that the data will be viewable in the CSV. These can be set to visible: false if you wish.

 $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;}*/},
             {
               field: 'owner_details_1',
               width: 300,
               pinnedLeft: true,
               cellTemplate: jsonTemplate,
               displayName: "Owner_Details",
               visible: true
             },
             {name: 'test', width: 50, pinnedLeft: true, displayName: "Test ", visible: true},
             {name: 'verified', width: 50, pinnedLeft: true, displayName: "Verified? ", visible: false},
             {name: 'owner_details.area_cost_center_manager', displayName: "area_cost_center_manager", visible: true},
       {name: 'owner_details.area_bug_shepherd', displayName: "area_bug_shepherd", visible: true},
       {name: 'owner_details.area_owner', displayName: "area_owner", visible: true},
       {name: 'owner_details.area_triage_owner', displayName: "area_triage_owner", visible: true},

            ];

Second Change

I have changed the template to use row.entity.{field} over COL_FIELD. (Snippet 1) This allows us to call the field from a grid field that is not itself. By doing this, we can name the custom formatted field something other than the field from which data is required. This in turn means that the CSV parsing will return null for that field, avoiding the object that would normally be returned (Snippet 2).

Snippet 1

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

Snippet 2 (note field: 'owner_details_1').

         {
           field: 'owner_details_1',
           width: 300,
           pinnedLeft: true,
           cellTemplate: jsonTemplate,
           displayName: "Owner_Details",
           visible: true
         },

http://plnkr.co/edit/3reHj1E0vMweVhhRmH9O?p=preview