show json complex string in ng-grid

Question

I have a web service which builds a JSON string like this:

JavaScriptSerializer j = new JavaScriptSerializer();
return "[" + string.Join(",", v.getProbingJobs().Select(a => j.Serialize(a)).ToArray()) + "]";

(getProbingJobs is an entity framework function retrieving data from a stored procedure)

This Web Service is consumed via AngularJS ($http.get method). I want to display the JSON string in ng-grid in columns . instead it shows ng-grid with one column and each row (cell) shows a char from the JSON string.

My JSON string is built like this:

"[{\"visualid\":\"35422064B1181\",\"operator\":\"ishashua\",\"Step\":\"Probe\",\"Eqiument\":\"LTM3538\",\"Last_Step_Start_Time\":\"\\\/Date(1406725260000)\\\/\",\"Job_Name\":\"P0 minVcc (UNIT 35422064B1181 )\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Closed\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Event\",\"Eqiument\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"11 Other\",\"Event_Name\":\"07 Unit Cracked\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Closed\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Probe\",\"Eqiument\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Probe\",\"Eqiument\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"11 Other\",\"Event_Name\":\"07 Unit Cracked\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00931\",\"operator\":\"kgitelmk\",\"Step\":\"Probing\",\"Eqiument\":\"LVX503\",\"Last_Step_Start_Time\":\"\\\/Date(1406698980000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0931)\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"}]" 

Answer 1

In general @Chandermanis comment is right. But you also have the Last_Step_Start_Time field which contains the DATE() function and will not be resolved.

You can fix this by using a CellTemplate in the ColumnDefs and use a custom filter:

cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field) | resolve_date}}</div>'

Here is the filter (can surely be done more elegant):

app.filter('resolve_date', function() {
  return function(text, length, end) {
    text = text.substring(6, 19);
    return Date(text);
  };
});

Here is a Plunker

Plz vote @Chandermanis comment up, because this was basically the right answer.

Update:

Regarding the width/wrapping issue:

That is a bit complicated to achieve because ng-grid is not a table but a lot of divs displayed as a grid.

First you hat to set the rowHeight in the gridOptions to a decent value.

Then you have to give each column an individual width so it can display the longest full word.

Last you have to override the css for ngCellText like this:

.ngCellText.ng-scope{
  white-space:normal;
}

Here is an updated Plunker